squash 'resources/unpacked/devtools' changes from 2342364..a5b99cb

a5b99cb [DevTools] Handle more cases for async step in markers 49ff603 force non-overlay scrollbars in all platform in flamechart 03f7c18 Revert of DevTools: format keys in object previews using sans serif. (patchset #3 id:40001 of https://codereview.chromium.org/2866363003/ ) 3ce67c1 Revert of DevTools: render product badges behind the setting. (patchset #6 id:100001 of https://codereview.chromium.org/2879943003/ ) git-subtree-dir: resources/unpacked/devtools git-subtree-split: a5b99cb
binaryage · May 14, 2017 · d2d68b3 · d2d68b3
1 parent 5b401aa
commit d2d68b3
Show file tree

Hide file tree

Showing 22 changed files with 193 additions and 374 deletions.
diff --git 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
@@ -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<string, string>} */
-    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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<string, string>} */
+    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
@@ -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);
 }