diff --git a/BUILD.gn b/BUILD.gn index 89f5ba8b92..322b6ce1ee 100644 --- a/BUILD.gn +++ b/BUILD.gn @@ -390,11 +390,8 @@ all_devtools_files = [ "front_end/persistence/PersistenceUtils.js", "front_end/platform/module.json", "front_end/platform/utilities.js", - "front_end/product_registry/BadgePool.js", - "front_end/product_registry/ProductRegistry.js", - "front_end/product_registry/badge.css", "front_end/product_registry/module.json", - "front_end/product_registry/popup.css", + "front_end/product_registry/ProductRegistry.js", "front_end/product_registry_impl/module.json", "front_end/product_registry_impl/ProductRegistryImpl.js", "front_end/product_registry_impl/ProductRegistryData.js", diff --git a/front_end/common/Color.js b/front_end/common/Color.js index a5330eb7c6..10db609269 100644 --- a/front_end/common/Color.js +++ b/front_end/common/Color.js @@ -817,67 +817,3 @@ Common.Color.PageHighlight = { Shape: Common.Color.fromRGBA([96, 82, 177, 0.8]), ShapeMargin: Common.Color.fromRGBA([96, 82, 127, .6]) }; - -Common.Color.Generator = class { - /** - * @param {!{min: number, max: number}|number=} hueSpace - * @param {!{min: number, max: number, count: (number|undefined)}|number=} satSpace - * @param {!{min: number, max: number, count: (number|undefined)}|number=} lightnessSpace - * @param {!{min: number, max: number, count: (number|undefined)}|number=} alphaSpace - */ - constructor(hueSpace, satSpace, lightnessSpace, alphaSpace) { - this._hueSpace = hueSpace || {min: 0, max: 360}; - this._satSpace = satSpace || 67; - this._lightnessSpace = lightnessSpace || 80; - this._alphaSpace = alphaSpace || 1; - /** @type {!Map} */ - this._colors = new Map(); - } - - /** - * @param {string} id - * @param {string} color - */ - setColorForID(id, color) { - this._colors.set(id, color); - } - - /** - * @param {string} id - * @return {string} - */ - colorForID(id) { - var color = this._colors.get(id); - if (!color) { - color = this._generateColorForID(id); - this._colors.set(id, color); - } - return color; - } - - /** - * @param {string} id - * @return {string} - */ - _generateColorForID(id) { - var hash = String.hashCode(id); - var h = this._indexToValueInSpace(hash, this._hueSpace); - var s = this._indexToValueInSpace(hash >> 8, this._satSpace); - var l = this._indexToValueInSpace(hash >> 16, this._lightnessSpace); - var a = this._indexToValueInSpace(hash >> 24, this._alphaSpace); - return `hsla(${h}, ${s}%, ${l}%, ${a})`; - } - - /** - * @param {number} index - * @param {!{min: number, max: number, count: (number|undefined)}|number} space - * @return {number} - */ - _indexToValueInSpace(index, space) { - if (typeof space === 'number') - return space; - var count = space.count || space.max - space.min; - index %= count; - return space.min + Math.floor(index / (count - 1) * (space.max - space.min)); - } -}; diff --git a/front_end/inspector.json b/front_end/inspector.json index 187734fe67..73ec761754 100644 --- a/front_end/inspector.json +++ b/front_end/inspector.json @@ -20,7 +20,7 @@ { "name": "sources" }, { "name": "timeline", "condition": "!v8only" }, { "name": "timeline_model", "condition": "!v8only" }, - { "name": "product_registry", "condition": "!v8only", "type": "autostart" }, + { "name": "product_registry", "condition": "!v8only" }, { "name": "product_registry_impl", "condition": "!v8only", "type": "remote" }, { "name": "profiler" }, { "name": "resources", "condition": "!v8only" }, diff --git a/front_end/network/NetworkDataGridNode.js b/front_end/network/NetworkDataGridNode.js index 10beb24e9b..e07c2ac5fb 100644 --- a/front_end/network/NetworkDataGridNode.js +++ b/front_end/network/NetworkDataGridNode.js @@ -361,9 +361,9 @@ Network.NetworkRequestNode = class extends Network.NetworkNode { /** @type {?Element} */ this._nameCell = null; /** @type {?Element} */ - this._nameBadgeElement = null; - /** @type {?Element} */ this._initiatorCell = null; + /** @type {?Element} */ + this._linkifiedInitiatorAnchor = null; this._request = request; this._isNavigationRequest = false; this.selectable = true; @@ -933,9 +933,6 @@ Network.NetworkRequestNode = class extends Network.NetworkNode { iconElement.classList.add(this._request.resourceType().name()); cell.appendChild(iconElement); - if (!this._nameBadgeElement) - this._nameBadgeElement = this.parentView().badgePool.badgeForURL(this._request.parsedURL); - cell.appendChild(this._nameBadgeElement); cell.createTextChild(this._request.networkManager().target().decorateLabel(this._request.name())); this._appendSubtitle(cell, this._request.path()); cell.title = this._request.url(); diff --git a/front_end/network/NetworkLogView.js b/front_end/network/NetworkLogView.js index 2aa7048e92..5db1474fcd 100644 --- a/front_end/network/NetworkLogView.js +++ b/front_end/network/NetworkLogView.js @@ -90,8 +90,8 @@ Network.NetworkLogView = class extends UI.VBox { this._currentMatchedRequestNode = null; this._currentMatchedRequestIndex = -1; + /** @type {!Components.Linkifier} */ this.linkifier = new Components.Linkifier(); - this.badgePool = new ProductRegistry.BadgePool(); this._recording = false; this._preserveLog = false; @@ -922,7 +922,6 @@ Network.NetworkLogView = class extends UI.VBox { this._timeCalculator.setWindow(null); this.linkifier.reset(); - this.badgePool.reset(); if (this._activeGroupLookup) this._activeGroupLookup.reset(); diff --git a/front_end/network/RequestTimingView.js b/front_end/network/RequestTimingView.js index 4a76e3bd7d..fd29015ba3 100644 --- a/front_end/network/RequestTimingView.js +++ b/front_end/network/RequestTimingView.js @@ -282,7 +282,7 @@ Network.RequestTimingView = class extends UI.VBox { * @param {number} right */ function addTiming(serverTiming, right) { - var colorGenerator = new Common.Color.Generator({min: 0, max: 360, count: 36}, {min: 50, max: 80}, 80); + var colorGenerator = new PerfUI.FlameChart.ColorGenerator({min: 0, max: 360, count: 36}, {min: 50, max: 80}, 80); var isTotal = serverTiming.metric.toLowerCase() === 'total'; var tr = tableElement.createChild('tr', isTotal ? 'network-timing-footer' : ''); var metric = tr.createChild('td', 'network-timing-metric'); diff --git a/front_end/object_ui/ObjectPropertiesSection.js b/front_end/object_ui/ObjectPropertiesSection.js index e2043fb748..c5fa5aad85 100644 --- a/front_end/object_ui/ObjectPropertiesSection.js +++ b/front_end/object_ui/ObjectPropertiesSection.js @@ -152,16 +152,16 @@ ObjectUI.ObjectPropertiesSection = class extends UI.TreeOutlineInShadow { addElements('class', textAfterPrefix, className); } else if (isAsync) { textAfterPrefix = text.substring('async function'.length); - addElements('async \u0192', textAfterPrefix, nameAndArguments(textAfterPrefix)); + addElements('async function', textAfterPrefix, nameAndArguments(textAfterPrefix)); } else if (isGenerator) { textAfterPrefix = text.substring('function*'.length); - addElements('\u0192*', textAfterPrefix, nameAndArguments(textAfterPrefix)); + addElements('function*', textAfterPrefix, nameAndArguments(textAfterPrefix)); } else if (isGeneratorShorthand) { textAfterPrefix = text.substring('*'.length); - addElements('\u0192*', textAfterPrefix, nameAndArguments(textAfterPrefix)); + addElements('function*', textAfterPrefix, nameAndArguments(textAfterPrefix)); } else if (isBasic) { textAfterPrefix = text.substring('function'.length); - addElements('\u0192', textAfterPrefix, nameAndArguments(textAfterPrefix)); + addElements('function', textAfterPrefix, nameAndArguments(textAfterPrefix)); } else if (isArrow) { const maxArrowFunctionCharacterLength = 60; var abbreviation = text; @@ -171,7 +171,7 @@ ObjectUI.ObjectPropertiesSection = class extends UI.TreeOutlineInShadow { abbreviation = text.substring(0, firstArrowIndex + 2) + ' {\u2026}'; addElements('', text, abbreviation); } else { - addElements('\u0192', text, nameAndArguments(text)); + addElements('function', text, nameAndArguments(text)); } valueElement.title = description || ''; return valueElement; @@ -738,10 +738,7 @@ ObjectUI.ObjectPropertyTreeElement = class extends UI.TreeElement { return null; var valueElement = createElementWithClass('span', 'value'); - if (value.description === 'Object') - valueElement.textContent = ''; - else - valueElement.setTextContentTruncatedIfNeeded(value.description || ''); + valueElement.setTextContentTruncatedIfNeeded(value.description || ''); valueElement.classList.add('object-value-' + (value.subtype || value.type)); valueElement.title = value.description || ''; return valueElement; diff --git a/front_end/object_ui/RemoteObjectPreviewFormatter.js b/front_end/object_ui/RemoteObjectPreviewFormatter.js index dd79f6adea..31a94d7e43 100644 --- a/front_end/object_ui/RemoteObjectPreviewFormatter.js +++ b/front_end/object_ui/RemoteObjectPreviewFormatter.js @@ -46,17 +46,16 @@ ObjectUI.RemoteObjectPreviewFormatter = class { parentElement.createChild('span', 'object-description').textContent = text + ' '; } - var propertiesElement = parentElement.createChild('span', 'object-properties-preview source-code'); - propertiesElement.createTextChild(isArrayOrTypedArray ? '[' : '{'); + parentElement.createTextChild(isArrayOrTypedArray ? '[' : '{'); if (preview.entries) - this._appendEntriesPreview(propertiesElement, preview); + this._appendEntriesPreview(parentElement, preview); else if (isArrayOrTypedArray) - this._appendArrayPropertiesPreview(propertiesElement, preview); + this._appendArrayPropertiesPreview(parentElement, preview); else - this._appendObjectPropertiesPreview(propertiesElement, preview); + this._appendObjectPropertiesPreview(parentElement, preview); if (preview.overflow) - propertiesElement.createChild('span').textContent = '\u2026'; - propertiesElement.createTextChild(isArrayOrTypedArray ? ']' : '}'); + parentElement.createChild('span').textContent = '\u2026'; + parentElement.createTextChild(isArrayOrTypedArray ? ']' : '}'); } /** @@ -223,7 +222,7 @@ ObjectUI.RemoteObjectPreviewFormatter = class { } if (type === 'function') { - span.textContent = '\u0192'; + span.textContent = 'function'; return span; } @@ -238,10 +237,7 @@ ObjectUI.RemoteObjectPreviewFormatter = class { } if (type === 'object' && !subtype) { - var preview = this._abbreviateFullQualifiedClassName(description); - if (preview === 'Object') - preview = '{\u2026}'; - span.textContent = preview; + span.textContent = this._abbreviateFullQualifiedClassName(description); span.title = description; return span; } diff --git a/front_end/object_ui/objectPropertiesSection.css b/front_end/object_ui/objectPropertiesSection.css index 7e836856d6..70e1f29101 100644 --- a/front_end/object_ui/objectPropertiesSection.css +++ b/front_end/object_ui/objectPropertiesSection.css @@ -4,6 +4,11 @@ * found in the LICENSE file. */ +.object-properties-section .name { + color: rgb(136, 19, 145); + flex-shrink: 0; +} + .object-properties-section-separator { flex-shrink: 0; padding-right: 5px; diff --git a/front_end/object_ui/objectValue.css b/front_end/object_ui/objectValue.css index 5cfb02646a..f1c6b53f7d 100644 --- a/front_end/object_ui/objectValue.css +++ b/front_end/object_ui/objectValue.css @@ -25,7 +25,7 @@ .object-value-function-prefix, .object-value-boolean { - color: rgb(13, 34, 170); + color: rgb(170, 13, 145); } .object-value-function { @@ -102,16 +102,3 @@ .object-properties-section .object-description { color: gray; } - -.object-properties-preview { - white-space: nowrap; -} - -.name { - color: rgb(136, 19, 145); - flex-shrink: 0; -} - -.object-properties-preview .name { - color: #565656; -} diff --git a/front_end/perf_ui/FlameChart.js b/front_end/perf_ui/FlameChart.js index 6e34f013ed..5ac5dd82f6 100644 --- a/front_end/perf_ui/FlameChart.js +++ b/front_end/perf_ui/FlameChart.js @@ -1493,6 +1493,73 @@ PerfUI.FlameChart.Events = { EntryHighlighted: Symbol('EntryHighlighted') }; +/** + * @unrestricted + */ +PerfUI.FlameChart.ColorGenerator = class { + /** + * @param {!{min: number, max: number}|number=} hueSpace + * @param {!{min: number, max: number, count: (number|undefined)}|number=} satSpace + * @param {!{min: number, max: number, count: (number|undefined)}|number=} lightnessSpace + * @param {!{min: number, max: number, count: (number|undefined)}|number=} alphaSpace + */ + constructor(hueSpace, satSpace, lightnessSpace, alphaSpace) { + this._hueSpace = hueSpace || {min: 0, max: 360}; + this._satSpace = satSpace || 67; + this._lightnessSpace = lightnessSpace || 80; + this._alphaSpace = alphaSpace || 1; + /** @type {!Map} */ + this._colors = new Map(); + } + + /** + * @param {string} id + * @param {string} color + */ + setColorForID(id, color) { + this._colors.set(id, color); + } + + /** + * @param {string} id + * @return {string} + */ + colorForID(id) { + var color = this._colors.get(id); + if (!color) { + color = this._generateColorForID(id); + this._colors.set(id, color); + } + return color; + } + + /** + * @param {string} id + * @return {string} + */ + _generateColorForID(id) { + var hash = String.hashCode(id); + var h = this._indexToValueInSpace(hash, this._hueSpace); + var s = this._indexToValueInSpace(hash >> 8, this._satSpace); + var l = this._indexToValueInSpace(hash >> 16, this._lightnessSpace); + var a = this._indexToValueInSpace(hash >> 24, this._alphaSpace); + return `hsla(${h}, ${s}%, ${l}%, ${a})`; + } + + /** + * @param {number} index + * @param {!{min: number, max: number, count: (number|undefined)}|number} space + * @return {number} + */ + _indexToValueInSpace(index, space) { + if (typeof space === 'number') + return space; + var count = space.count || space.max - space.min; + index %= count; + return space.min + Math.floor(index / (count - 1) * (space.max - space.min)); + } +}; + /** * @implements {PerfUI.TimelineGrid.Calculator} * @unrestricted diff --git a/front_end/perf_ui/flameChart.css b/front_end/perf_ui/flameChart.css index 6f42b1b229..ae1575a8f2 100644 --- a/front_end/perf_ui/flameChart.css +++ b/front_end/perf_ui/flameChart.css @@ -33,35 +33,29 @@ .flame-chart-v-scroll { position: absolute; - top: 0; - right: 0; - bottom: 0; overflow-x: hidden; z-index: 200; padding-left: 1px; + right: 2px; + top: 3px; + bottom: 3px; } .flame-chart-v-scroll.always-show-scrollbar { overflow-y: scroll; } -:host-context(.platform-mac) .flame-chart-v-scroll { - right: 2px; - top: 3px; - bottom: 3px; -} - /* force non-overlay scrollbars */ -:host-context(.platform-mac) ::-webkit-scrollbar { +::-webkit-scrollbar { width: 8px; } -:host-context(.platform-mac) ::-webkit-scrollbar-thumb { +::-webkit-scrollbar-thumb { background-color: hsla(0, 0%, 56%, 0.6); border-radius: 50px; } -:host-context(.platform-mac) .flame-chart-v-scroll:hover::-webkit-scrollbar-thumb { +.flame-chart-v-scroll:hover::-webkit-scrollbar-thumb { background-color: hsla(0, 0%, 25%, 0.6); } diff --git a/front_end/product_registry/BadgePool.js b/front_end/product_registry/BadgePool.js deleted file mode 100644 index bacfad7935..0000000000 --- a/front_end/product_registry/BadgePool.js +++ /dev/null @@ -1,156 +0,0 @@ -// Copyright 2017 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. - -ProductRegistry.BadgePool = class { - constructor() { - this._setting = Common.settings.moduleSetting('product_registry.badges-visible'); - this._setting.addChangeListener(this._settingUpdated.bind(this)); - /** @type {!Map>}*/ - this._badgeElements = new Map(); - } - - /** - * @param {!SDK.ResourceTreeFrame} frame - * @return {!Element} - */ - badgeForFrame(frame) { - return this._badgeForFrameOrUrl(this._resolveUrl.bind(this, frame)); - } - - /** - * @param {!Common.ParsedURL} parsedUrl - * @return {!Element} - */ - badgeForURL(parsedUrl) { - return this._badgeForFrameOrUrl(() => Promise.resolve(parsedUrl)); - } - - reset() { - this._badgeElements.clear(); - } - - /** - * @param {function():!Promise} urlResolver - * @return {!Element} - */ - _badgeForFrameOrUrl(urlResolver) { - var element = createElement('span'); - var root = UI.createShadowRootWithCoreStyles(element, 'product_registry/badge.css'); - var badgeElement = root.createChild('span', 'product-registry-badge monospace hidden'); - badgeElement.textContent = ' '; - badgeElement.addEventListener('mousedown', event => event.consume()); - badgeElement.addEventListener('click', event => { - this._showPopup(badgeElement); - event.consume(); - }, false); - - this._badgeElements.set(badgeElement, urlResolver); - if (this._setting.get()) - this._renderBadge(badgeElement); - return element; - } - - /** - * @param {?SDK.ResourceTreeFrame} frame - * @return {!Promise} - */ - async _resolveUrl(frame) { - var registry = await ProductRegistry.instance(); - var parsedUrl = new Common.ParsedURL(frame.url); - var entry = registry.entryForUrl(parsedUrl); - if (!entry) { - frame.findCreationCallFrame(callFrame => { - if (!callFrame.url) - return false; - parsedUrl = new Common.ParsedURL(callFrame.url); - return !!registry.entryForUrl(parsedUrl); - }); - } - return parsedUrl; - } - - /** - * @param {!Element} badgeElement - */ - async _renderBadge(badgeElement) { - if (!this._badgeElements.has(badgeElement)) - return; - - var registry = await ProductRegistry.instance(); - var parsedUrl = await this._badgeElements.get(badgeElement)(); - var entryName = registry.nameForUrl(parsedUrl); - - if (!entryName) { - badgeElement.textContent = ' '; - badgeElement.style.removeProperty('background-color'); - return; - } - - var label; - var tokens = entryName.replace(/[a-z]*/g, '').split(' '); - if (tokens.length > 1) - label = tokens[0][0] + tokens[1][0]; - else - label = entryName; - - badgeElement.textContent = label.substring(0, 2).toUpperCase(); - badgeElement.style.backgroundColor = ProductRegistry.BadgePool.colorForEntryName(entryName); - badgeElement.classList.toggle('hidden', !this._setting.get()); - } - - _settingUpdated() { - var enabled = this._setting.get(); - if (!enabled) { - for (var badgeElement of this._badgeElements.keys()) - badgeElement.classList.add('hidden'); - return; - } - for (var badgeElement of this._badgeElements.keys()) - this._renderBadge(badgeElement); - } - - /** - * @param {!Element} badgeElement - */ - async _showPopup(badgeElement) { - if (!this._badgeElements.has(badgeElement)) - return; - - var registry = await ProductRegistry.instance(); - var parsedUrl = await this._badgeElements.get(badgeElement)(); - var entryName = registry.nameForUrl(parsedUrl); - - var element = createElement('div'); - var root = UI.createShadowRootWithCoreStyles(element, 'product_registry/popup.css'); - var popupElement = root.createChild('div', 'product-registry-popup'); - var domainElement = popupElement.createChild('div', 'product-registry-domain'); - domainElement.textContent = parsedUrl.domain(); - var entryNameElement = popupElement.createChild('div', 'product-registry-name'); - entryNameElement.textContent = entryName; - var reportLink = - 'https://docs.google.com/forms/d/e/1FAIpQLSchz2FdcQ-rRllzl8BbhWaTRRY-12BpPjW6Hr9e1-BpCA083w/viewform' + - '?entry_1425918171=' + encodeURIComponent((parsedUrl.domain() + parsedUrl.path).substr(0, 100)); - popupElement.appendChild(UI.createExternalLink(reportLink, 'Report mismatch', 'product-registry-link')); - - var dialog = new UI.Dialog(); - dialog.setContentAnchorBox(badgeElement.boxInWindow()); - dialog.contentElement.appendChild(element); - dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.MeasureContent); - dialog.setAnchorBehavior(UI.GlassPane.AnchorBehavior.PreferTop); - dialog.addCloseButton(); - dialog.show(/** @type {!Document} */ (badgeElement.ownerDocument)); - } - - /** - * @param {string} entryName - * @return {string} - */ - static colorForEntryName(entryName) { - if (!ProductRegistry.BadgePool._colorGenerator) { - ProductRegistry.BadgePool._colorGenerator = - new Common.Color.Generator({min: 30, max: 330}, {min: 50, max: 80, count: 3}, 85); - } - return ProductRegistry.BadgePool._colorGenerator.colorForID(entryName); - } -}; diff --git a/front_end/product_registry/badge.css b/front_end/product_registry/badge.css deleted file mode 100644 index 54c946844f..0000000000 --- a/front_end/product_registry/badge.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2017 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. - */ - -.product-registry-badge { - background-color: rgba(0, 0, 0, 0.2); - border-radius: 2px; - padding: 1px 2px; - margin-right: 4px; - white-space: pre; - cursor: pointer; -} diff --git a/front_end/product_registry/module.json b/front_end/product_registry/module.json index 2dc1781b38..3f3ce5c8ce 100644 --- a/front_end/product_registry/module.json +++ b/front_end/product_registry/module.json @@ -1,34 +1,11 @@ { "extensions": [ - { - "type": "setting", - "category": "UI", - "settingName": "product_registry.badges-visible", - "settingType": "boolean", - "defaultValue": false, - "options": [ - { - "value": true, - "title": "Show third party badges" - }, - { - "value": false, - "title": "Do not show third party badges" - } - ] - } ], "dependencies": [ "common", - "sdk", - "ui" + "sdk" ], "scripts": [ - "BadgePool.js", "ProductRegistry.js" - ], - "resources": [ - "badge.css", - "popup.css" ] } diff --git a/front_end/product_registry/popup.css b/front_end/product_registry/popup.css deleted file mode 100644 index 9929aeea45..0000000000 --- a/front_end/product_registry/popup.css +++ /dev/null @@ -1,31 +0,0 @@ -/* - * Copyright 2017 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. - */ - -.product-registry-popup { - background-color: white; - padding: 15px 45px 15px 15px; - border-radius: 4px; - white-space: nowrap; - box-shadow: 0px 1px 2px 0px gray; -} - -.product-registry-domain { - font-weight: bold; -} - -.product-registry-name { - padding: 10px 0; -} - -.product-registry-link { - display: block; -} - -div[is=dt-close-button] { - position: absolute; - top: 5px; - right: 5px; -} diff --git a/front_end/product_registry_impl/ProductRegistryImpl.js b/front_end/product_registry_impl/ProductRegistryImpl.js index e6bcbbd92f..f693daf0e3 100644 --- a/front_end/product_registry_impl/ProductRegistryImpl.js +++ b/front_end/product_registry_impl/ProductRegistryImpl.js @@ -27,7 +27,7 @@ ProductRegistryImpl.Registry = class { * @return {?ProductRegistry.Registry.ProductEntry} */ entryForUrl(parsedUrl) { - if (parsedUrl.isDataURL() || !parsedUrl.isValid) + if (parsedUrl.isDataURL()) return null; // TODO(allada) This should be expanded to allow paths as as well as domain to find a product. var productsByDomainHash = ProductRegistryImpl._productsByDomainHash; diff --git a/front_end/profiler/CPUProfileFlameChart.js b/front_end/profiler/CPUProfileFlameChart.js index 501ba7ca18..0d0d1dc50d 100644 --- a/front_end/profiler/CPUProfileFlameChart.js +++ b/front_end/profiler/CPUProfileFlameChart.js @@ -39,12 +39,12 @@ Profiler.ProfileFlameChartDataProvider = class { } /** - * @return {!Common.Color.Generator} + * @return {!PerfUI.FlameChart.ColorGenerator} */ static colorGenerator() { if (!Profiler.ProfileFlameChartDataProvider._colorGenerator) { - var colorGenerator = - new Common.Color.Generator({min: 30, max: 330}, {min: 50, max: 80, count: 5}, {min: 80, max: 90, count: 3}); + var colorGenerator = new PerfUI.FlameChart.ColorGenerator( + {min: 30, max: 330}, {min: 50, max: 80, count: 5}, {min: 80, max: 90, count: 3}); colorGenerator.setColorForID('(idle)', 'hsl(0, 0%, 94%)'); colorGenerator.setColorForID('(program)', 'hsl(0, 0%, 80%)'); diff --git a/front_end/sources/JavaScriptSourceFrame.js b/front_end/sources/JavaScriptSourceFrame.js index ad3581c545..c547c015cd 100644 --- a/front_end/sources/JavaScriptSourceFrame.js +++ b/front_end/sources/JavaScriptSourceFrame.js @@ -740,26 +740,95 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame { var isCurrentPosition = this._executionLocation && lineNumber === this._executionLocation.lineNumber && location.columnNumber === this._executionLocation.columnNumber; if (location.type === Protocol.Debugger.BreakLocationType.Call && isAsyncCall) { - var functionPosition = line.indexOf('(', token.endColumn); - if (functionPosition !== -1) { - functionPosition++; - while (functionPosition < line.length && line[functionPosition] === ' ') - functionPosition++; - var nextToken = this.textEditor.tokenAtTextPosition(lineNumber, functionPosition); - if (nextToken) { - if (line.substring(nextToken.startColumn, nextToken.endColumn) === '(') { - var closeParen = line.indexOf(')', nextToken.endColumn); - nextToken.endColumn = closeParen === -1 ? line.length : closeParen + 1; - } - highlightRange = - new TextUtils.TextRange(lineNumber, nextToken.startColumn, lineNumber, nextToken.endColumn - 1); - decoration = this.textEditor.highlightRange(highlightRange, 'source-frame-async-step-in'); - this._continueToLocationDecorations.set( - decoration, this._asyncStepIn.bind(this, location, isCurrentPosition)); - } + var asyncStepInRange = this._findAsyncStepInRange(this.textEditor, lineNumber, line, token.endColumn); + if (asyncStepInRange) { + highlightRange = + new TextUtils.TextRange(lineNumber, asyncStepInRange.from, lineNumber, asyncStepInRange.to - 1); + decoration = this.textEditor.highlightRange(highlightRange, 'source-frame-async-step-in'); + this._continueToLocationDecorations.set( + decoration, this._asyncStepIn.bind(this, location, isCurrentPosition)); } } } + + this._continueToLocationRenderedForTest(); + } + } + + _continueToLocationRenderedForTest() { + } + + /** + * @param {!SourceFrame.SourcesTextEditor} textEditor + * @param {number} lineNumber + * @param {string} line + * @param {number} column + * @return {?{from: number, to: number}} + */ + _findAsyncStepInRange(textEditor, lineNumber, line, column) { + var token; + var tokenText; + var from = column; + var to = line.length; + + var position = line.indexOf('(', column); + if (position === -1) + return null; + position++; + + skipWhitespace(); + if (position >= line.length) + return null; + + nextToken(); + if (!token) + return null; + from = token.startColumn; + + if (token.type === 'js-keyword' && tokenText === 'async') { + skipWhitespace(); + if (position >= line.length) + return {from: from, to: to}; + nextToken(); + if (!token) + return {from: from, to: to}; + } + + if (token.type === 'js-keyword' && tokenText === 'function') + return {from: from, to: to}; + + if (token.type && this._isIdentifier(token.type)) + return {from: from, to: to}; + + if (tokenText !== '(') + return null; + var closeParen = line.indexOf(')', position); + if (closeParen === -1 || line.substring(position, closeParen).indexOf('(') !== -1) + return {from: from, to: to}; + return {from: from, to: closeParen + 1}; + + function nextToken() { + token = textEditor.tokenAtTextPosition(lineNumber, position); + if (token) { + position = token.endColumn; + to = token.endColumn; + tokenText = line.substring(token.startColumn, token.endColumn); + } + } + + function skipWhitespace() { + while (position < line.length) { + if (line[position] === ' ') { + position++; + continue; + } + var token = textEditor.tokenAtTextPosition(lineNumber, position); + if (token.type === 'js-comment') { + position = token.endColumn; + continue; + } + break; + } } } diff --git a/front_end/timeline/TimelineFlameChartDataProvider.js b/front_end/timeline/TimelineFlameChartDataProvider.js index deb9fba02c..340ee6bc67 100644 --- a/front_end/timeline/TimelineFlameChartDataProvider.js +++ b/front_end/timeline/TimelineFlameChartDataProvider.js @@ -51,9 +51,9 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object { this._model = null; this._consoleColorGenerator = - new Common.Color.Generator({min: 30, max: 55}, {min: 70, max: 100, count: 6}, 50, 0.7); + new PerfUI.FlameChart.ColorGenerator({min: 30, max: 55}, {min: 70, max: 100, count: 6}, 50, 0.7); this._extensionColorGenerator = - new Common.Color.Generator({min: 210, max: 300}, {min: 70, max: 100, count: 6}, 70, 0.7); + new PerfUI.FlameChart.ColorGenerator({min: 210, max: 300}, {min: 70, max: 100, count: 6}, 70, 0.7); /** * @param {!Object} extra diff --git a/front_end/timeline/TimelineUIUtils.js b/front_end/timeline/TimelineUIUtils.js index 887887c159..7afb137c3c 100644 --- a/front_end/timeline/TimelineUIUtils.js +++ b/front_end/timeline/TimelineUIUtils.js @@ -1734,7 +1734,7 @@ Timeline.TimelineUIUtils = class { static colorForId(id) { if (!Timeline.TimelineUIUtils.colorForId._colorGenerator) { Timeline.TimelineUIUtils.colorForId._colorGenerator = - new Common.Color.Generator({min: 30, max: 330}, {min: 50, max: 80, count: 3}, 85); + new PerfUI.FlameChart.ColorGenerator({min: 30, max: 330}, {min: 50, max: 80, count: 3}, 85); Timeline.TimelineUIUtils.colorForId._colorGenerator.setColorForID('', '#f2ecdc'); } return Timeline.TimelineUIUtils.colorForId._colorGenerator.colorForID(id); diff --git a/front_end/ui/Dialog.js b/front_end/ui/Dialog.js index 0eb1932ee0..64406e77b9 100644 --- a/front_end/ui/Dialog.js +++ b/front_end/ui/Dialog.js @@ -35,7 +35,6 @@ UI.Dialog = class extends UI.GlassPane { this.contentElement.tabIndex = 0; this.contentElement.addEventListener('focus', () => this.widget().focus(), false); this.contentElement.addEventListener('keydown', this._onKeyDown.bind(this), false); - this.widget().setDefaultFocusedElement(this.contentElement); this.setPointerEventsBehavior(UI.GlassPane.PointerEventsBehavior.BlockedByGlassPane); this.setOutsideClickCallback(event => { this.hide();