squash 'resources/unpacked/devtools' changes from da1ed46..52c36e6

52c36e6 DevTools: Refactor Profiler domain interface 5b5a787 DevTools: Use png icon for bezier editor b95270c DevTools: Repick execution context when frames are loaded d2cdcdc [DevTools] Rename entities in js_protocol, remove deprecated ones. f75d989 DevTools: do not load workers from the cloud in the debug mode. 2fb9635 DevTools: follow up to the sources views, make setting screen apear, make shortcuts a simple view. f0784e9 DevTools: migrate sources panel sidebar to views. 077fee1 DevTools: Standardize box shadows 2673630 Revert of [DevTools] Rename entities in js_protocol, remove deprecated ones. (patchset #1 id:1 of https://codereview.chromium.org/2249743002/ ) git-subtree-dir: resources/unpacked/devtools git-subtree-split: 52c36e6
binaryage · Aug 17, 2016 · c0491f7 · c0491f7
1 parent 52c4e3f
commit c0491f7
Show file tree

Hide file tree

Showing 43 changed files with 587 additions and 464 deletions.
diff --git a/devtools.gypi b/devtools.gypi
@@ -237,6 +237,7 @@
             'front_end/emulation/TouchModel.js',
         ],
         'devtools_ui_js_files': [
+            'front_end/ui/bezierSwatch.css',
             'front_end/ui/checkboxTextLabel.css',
             'front_end/ui/closeButton.css',
             'front_end/ui/colorSwatch.css',

diff --git a/front_end/Images/smallIcons.png b/front_end/Images/smallIcons.png
diff --git a/front_end/Images/smallIcons_2x.png b/front_end/Images/smallIcons_2x.png
diff --git a/front_end/Images/src/optimize_png.hashes b/front_end/Images/src/optimize_png.hashes
@@ -2,7 +2,7 @@
     "resourceGlyphs.svg": "8e1947b1fa4aac49cbc081f85f44d412",
     "breakpointConditional.svg": "4cf90210b2af2ed84db2f60b07bcde28",
     "errorWave.svg": "e183fa242a22ed4784a92f6becbc2c45",
-    "smallIcons.svg": "502937c3d719c885acb5c18184ac3eca",
+    "smallIcons.svg": "8a0b5c6bec69c3f17f71fb51245e00d1",
     "settingsListRemove.svg": "ce9e7c5c5cdaef28e6ee51d9478d5485",
     "toolbarButtonGlyphs.svg": "195b979b5677122cf2f3b65e8a4d657e",
     "breakpoint.svg": "69cd92d807259c022791112809b97799",

diff --git a/front_end/Images/src/smallIcons.svg b/front_end/Images/src/smallIcons.svg
diff --git a/front_end/Images/src/svg2png.hashes b/front_end/Images/src/svg2png.hashes
@@ -2,7 +2,7 @@
     "resourceGlyphs.svg": "8e1947b1fa4aac49cbc081f85f44d412",
     "breakpointConditional.svg": "4cf90210b2af2ed84db2f60b07bcde28",
     "errorWave.svg": "e183fa242a22ed4784a92f6becbc2c45",
-    "smallIcons.svg": "502937c3d719c885acb5c18184ac3eca",
+    "smallIcons.svg": "8a0b5c6bec69c3f17f71fb51245e00d1",
     "settingsListRemove.svg": "ce9e7c5c5cdaef28e6ee51d9478d5485",
     "toolbarButtonGlyphs.svg": "195b979b5677122cf2f3b65e8a4d657e",
     "breakpoint.svg": "69cd92d807259c022791112809b97799",

diff --git a/front_end/components/BreakpointsSidebarPaneBase.js b/front_end/components/BreakpointsSidebarPaneBase.js
@@ -45,9 +45,6 @@ WebInspector.BreakpointsSidebarPaneBase = function()
     this.emptyElement.textContent = WebInspector.UIString("No Breakpoints");
 
     this.element.appendChild(this.emptyElement);
-    WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.DebuggerPaused, this._update, this);
-    WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.DebuggerResumed, this._update, this);
-    WebInspector.context.addFlavorChangeListener(WebInspector.Target, this._update, this);
 }
 
 WebInspector.BreakpointsSidebarPaneBase.prototype = {
@@ -94,19 +91,5 @@ WebInspector.BreakpointsSidebarPaneBase.prototype = {
         }
     },
 
-    _update: function()
-    {
-        var target = WebInspector.context.flavor(WebInspector.Target);
-        var debuggerModel = WebInspector.DebuggerModel.fromTarget(target);
-        var details = debuggerModel ? debuggerModel.debuggerPausedDetails() : null;
-        this.highlightDetails(details);
-    },
-
-    /**
-     * @param {?WebInspector.DebuggerPausedDetails} details
-     * @protected
-     */
-    highlightDetails: function(details) { },
-
     __proto__: WebInspector.VBox.prototype
 }
diff --git a/front_end/components/DOMBreakpointsSidebarPane.js b/front_end/components/DOMBreakpointsSidebarPane.js
@@ -31,6 +31,7 @@
 /**
  * @constructor
  * @extends {WebInspector.BreakpointsSidebarPaneBase}
+ * @implements {WebInspector.ContextFlavorListener}
  */
 WebInspector.DOMBreakpointsSidebarPane = function()
 {
@@ -55,21 +56,20 @@ WebInspector.DOMBreakpointsSidebarPane = function()
     this._contextMenuLabels[this._breakpointTypes.AttributeModified] = WebInspector.UIString.capitalize("Attributes ^modifications");
     this._contextMenuLabels[this._breakpointTypes.NodeRemoved] = WebInspector.UIString.capitalize("Node ^removal");
 
-    WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.InspectedURLChanged, this._inspectedURLChanged, this);
     WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
+    WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.InspectedURLChanged, this._inspectedURLChanged, this);
+    this._inspectedURL = WebInspector.targetManager.inspectedURL();
+    this._update();
 }
 
 WebInspector.DOMBreakpointsSidebarPane.Marker = "breakpoint-marker";
 
 WebInspector.DOMBreakpointsSidebarPane.prototype = {
-    _inspectedURLChanged: function(event)
+    _inspectedURLChanged: function()
     {
-        var target = /** @type {!WebInspector.Target} */ (event.data);
-        if (target !== WebInspector.targetManager.mainTarget())
-            return;
         this._breakpointElements = {};
         this.reset();
-        this._inspectedURL = target.inspectedURL().removeURLFragment();
+        this._inspectedURL = WebInspector.targetManager.inspectedURL();
     },
 
     /**
@@ -322,10 +322,16 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
 
     /**
      * @override
-     * @param {?WebInspector.DebuggerPausedDetails} details
+     * @param {?Object} object
      */
-    highlightDetails: function(details)
+    flavorChanged: function(object)
+    {
+        this._update();
+    },
+
+    _update: function()
     {
+        var details = WebInspector.context.flavor(WebInspector.DebuggerPausedDetails);
         if (!details || details.reason !== WebInspector.DebuggerModel.BreakReason.DOM) {
             if (this._highlightedElement) {
                 this._highlightedElement.classList.remove("breakpoint-hit");
@@ -338,7 +344,7 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         var element = this._breakpointElements[breakpointId];
         if (!element)
             return;
-        WebInspector.viewManager.revealViewWithWidget(this);
+        WebInspector.viewManager.showView("sources.domBreakpoints");
         element.classList.add("breakpoint-hit");
         this._highlightedElement = element;
     },

diff --git a/front_end/components/ExecutionContextSelector.js b/front_end/components/ExecutionContextSelector.js
@@ -16,6 +16,7 @@ WebInspector.ExecutionContextSelector = function(targetManager, context)
 
     targetManager.addModelListener(WebInspector.RuntimeModel, WebInspector.RuntimeModel.Events.ExecutionContextCreated, this._onExecutionContextCreated, this);
     targetManager.addModelListener(WebInspector.RuntimeModel, WebInspector.RuntimeModel.Events.ExecutionContextDestroyed, this._onExecutionContextDestroyed, this);
+    targetManager.addModelListener(WebInspector.RuntimeModel, WebInspector.RuntimeModel.Events.ExecutionContextOrderChanged, this._onExecutionContextOrderChanged, this);
     this._targetManager = targetManager;
     this._context = context;
 }
@@ -141,12 +142,7 @@ WebInspector.ExecutionContextSelector.prototype = {
      */
     _onExecutionContextCreated: function(event)
     {
-        var executionContext = /** @type {!WebInspector.ExecutionContext} */ (event.data);
-        if (!this._context.flavor(WebInspector.ExecutionContext) || this._shouldSwitchToContext(executionContext)) {
-            this._ignoreContextChanged = true;
-            this._context.setFlavor(WebInspector.ExecutionContext, executionContext);
-            this._ignoreContextChanged = false;
-        }
+        this._switchContextIfNecessary(/** @type {!WebInspector.ExecutionContext} */ (event.data));
     },
 
     /**
@@ -159,6 +155,34 @@ WebInspector.ExecutionContextSelector.prototype = {
             this._currentExecutionContextGone();
     },
 
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _onExecutionContextOrderChanged: function(event)
+    {
+        var runtimeModel = /** @type {!WebInspector.RuntimeModel} */ (event.data);
+        var executionContexts = runtimeModel.executionContexts();
+        for (var i = 0; i < executionContexts.length; i++) {
+            if (this._switchContextIfNecessary(executionContexts[i]))
+                break;
+        }
+    },
+
+    /**
+     * @param {!WebInspector.ExecutionContext} executionContext
+     * @return {boolean}
+     */
+    _switchContextIfNecessary: function(executionContext)
+    {
+        if (!this._context.flavor(WebInspector.ExecutionContext) || this._shouldSwitchToContext(executionContext)) {
+            this._ignoreContextChanged = true;
+            this._context.setFlavor(WebInspector.ExecutionContext, executionContext);
+            this._ignoreContextChanged = false;
+            return true;
+        }
+        return false;
+    },
+
     _currentExecutionContextGone: function()
     {
         var targets = this._targetManager.targets(WebInspector.Target.Capability.JS);

diff --git a/front_end/elements/ColorSwatchPopoverIcon.js b/front_end/elements/ColorSwatchPopoverIcon.js
@@ -12,7 +12,14 @@ WebInspector.BezierPopoverIcon = function(treeElement, swatchPopoverHelper, text
 {
     this._treeElement = treeElement;
     this._swatchPopoverHelper = swatchPopoverHelper;
-    this._createDOM(text);
+
+    this._element = createElement("span");
+    this._iconElement = WebInspector.BezierSwatch.create();
+    this._iconElement.title = WebInspector.UIString("Open cubic bezier editor");
+    this._iconElement.addEventListener("click", this._iconClick.bind(this), false);
+    this._element.appendChild(this._iconElement);
+    this._bezierValueElement = this._element.createChild("span");
+    this._bezierValueElement.textContent = text;
 
     this._boundBezierChanged = this._bezierChanged.bind(this);
     this._boundOnScroll = this._onScroll.bind(this);
@@ -27,27 +34,6 @@ WebInspector.BezierPopoverIcon.prototype = {
         return this._element;
     },
 
-    /**
-     * @param {string} text
-     */
-    _createDOM: function(text)
-    {
-        this._element = createElement("nobr");
-
-        this._iconElement = this._element.createChild("div", "popover-icon bezier-icon");
-        this._iconElement.title = WebInspector.UIString("Open cubic bezier editor");
-        var svg = this._iconElement.createSVGChild("svg");
-        svg.setAttribute("height", 10);
-        svg.setAttribute("width", 10);
-        this._iconElement.addEventListener("click", this._iconClick.bind(this), false);
-        var g = svg.createSVGChild("g");
-        var path = g.createSVGChild("path");
-        path.setAttribute("d", "M2,8 C2,3 8,7 8,2");
-
-        this._bezierValueElement = this._element.createChild("span");
-        this._bezierValueElement.textContent = text;
-    },
-
     /**
      * @param {!Event} event
      */

diff --git a/front_end/elements/elementsPanel.css b/front_end/elements/elementsPanel.css
@@ -633,30 +633,6 @@
     white-space: pre;
 }
 
-.popover-icon {
-    margin-left: 1px;
-    margin-right: 2px;
-    width: 10px;
-    height: 10px;
-    position: relative;
-    top: 1px;
-    display: inline-block;
-    line-height: 1px;
-    -webkit-user-select: none;
-}
-
-.bezier-icon {
-    background-color: #9C27B0;
-    border-radius: 2px;
-}
-
-.bezier-icon path {
-    stroke: white;
-    stroke-width: 1.5;
-    stroke-linecap: square;
-    fill: none;
-}
-
 li.child-editing .styles-clipboard-only {
     display: none;
 }

diff --git a/front_end/elements/elementsTreeOutline.css b/front_end/elements/elementsTreeOutline.css
@@ -174,8 +174,9 @@
 }
 
 .CodeMirror {
-    box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
-    outline: 1px solid rgb(66%, 66%, 66%) !important;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2),
+                0 2px 4px rgba(0, 0, 0, 0.2),
+                0 2px 6px rgba(0, 0, 0, 0.1);
     background-color: white;
 }
 
@@ -194,8 +195,9 @@ button, input, select {
 
 .editing {
     -webkit-user-select: text;
-    box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
-    outline: 1px solid rgb(66%, 66%, 66%) !important;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2),
+                0 2px 4px rgba(0, 0, 0, 0.2),
+                0 2px 6px rgba(0, 0, 0, 0.1);
     background-color: white;
     -webkit-user-modify: read-write-plaintext-only;
     text-overflow: clip !important;

diff --git a/front_end/formatter_worker.json b/front_end/formatter_worker.json
@@ -1,7 +1,7 @@
 {
     "modules": [
         { "name": "formatter_worker", "type": "autostart" },
-        { "name": "gonzales", "type": "remote" }
+        { "name": "gonzales", "type": "remoteInRelease" }
     ],
 
     "has_html": false

diff --git a/front_end/sdk/CPUProfileDataModel.js b/front_end/sdk/CPUProfileDataModel.js
@@ -42,7 +42,7 @@ WebInspector.CPUProfileDataModel = function(profile)
     this.profileStartTime = profile.startTime * 1000;
     this.profileEndTime = profile.endTime * 1000;
     this.totalHitCount = 0;
-    this.profileHead = this._translateProfileTree(profile.head);
+    this.profileHead = this._translateProfileTree(profile.nodes);
     WebInspector.ProfileTreeModel.call(this, this.profileHead);
     this._extractMetaNodes();
     if (this.samples) {
@@ -54,19 +54,11 @@ WebInspector.CPUProfileDataModel = function(profile)
 
 WebInspector.CPUProfileDataModel.prototype = {
     /**
-     * @param {!ProfilerAgent.CPUProfileNode} root
+     * @param {!Array<!ProfilerAgent.CPUProfileNode>} nodes
      * @return {!WebInspector.CPUProfileNode}
      */
-    _translateProfileTree: function(root)
+    _translateProfileTree: function(nodes)
     {
-        /**
-         * @param  {!ProfilerAgent.CPUProfileNode} node
-         * @return {number}
-         */
-        function computeHitCountForSubtree(node)
-        {
-            return node.children.reduce((acc, node) => acc + computeHitCountForSubtree(node), node.hitCount);
-        }
         /**
          * @param {!ProfilerAgent.CPUProfileNode} node
          * @return {boolean}
@@ -77,14 +69,21 @@ WebInspector.CPUProfileDataModel.prototype = {
                 return !!node.callFrame.url && node.callFrame.url.startsWith("native ");
             return !!node.url && node.url.startsWith("native ");
         }
-        this.totalHitCount = computeHitCountForSubtree(root);
+        /** @type {!Map<number, !ProfilerAgent.CPUProfileNode>} */
+        var nodeByIdMap = new Map();
+        for (var i = 0; i < nodes.length; ++i) {
+            var node = nodes[i];
+            nodeByIdMap.set(node.id, node);
+        }
+        this.totalHitCount = nodes.reduce((acc, node) => acc + node.hitCount, 0);
         var sampleTime = (this.profileEndTime - this.profileStartTime) / this.totalHitCount;
         var keepNatives = !!WebInspector.moduleSetting("showNativeFunctionsInJSProfile").get();
+        var root = nodes[0];
         /** @type {!Map<number, number>} */
         var idMap = new Map([[root.id, root.id]]);
         var resultRoot = new WebInspector.CPUProfileNode(root, sampleTime);
         var parentNodeStack = root.children.map(() => resultRoot);
-        var sourceNodeStack = root.children;
+        var sourceNodeStack = root.children.map(id => nodeByIdMap.get(id));
         while (sourceNodeStack.length) {
             var parentNode = parentNodeStack.pop();
             var sourceNode = sourceNodeStack.pop();
@@ -97,7 +96,7 @@ WebInspector.CPUProfileDataModel.prototype = {
             }
             idMap.set(sourceNode.id, parentNode.id);
             parentNodeStack.push.apply(parentNodeStack, sourceNode.children.map(() => parentNode));
-            sourceNodeStack.push.apply(sourceNodeStack, sourceNode.children);
+            sourceNodeStack.push.apply(sourceNodeStack, sourceNode.children.map(id => nodeByIdMap.get(id)));
         }
         if (this.samples)
             this.samples = this.samples.map(id => idMap.get(id));

diff --git a/front_end/sdk/ResourceTreeModel.js b/front_end/sdk/ResourceTreeModel.js
@@ -55,6 +55,7 @@ WebInspector.ResourceTreeModel = function(target, networkManager, securityOrigin
 
     this._pendingReloadOptions = null;
     this._reloadSuspensionCount = 0;
+    this._fireExecutionContextOrderChanged = target.runtimeModel.fireExecutionContextOrderChanged.bind(target.runtimeModel);
 
     target.runtimeModel.setExecutionContextComparator(this._executionContextComparator.bind(this));
 }
@@ -132,6 +133,7 @@ WebInspector.ResourceTreeModel.prototype = {
             this.target().setInspectedURL(mainFramePayload.frame.url);
         }
         this._cachedResourcesProcessed = true;
+        this._fireExecutionContextOrderChanged();
         this.dispatchEventToListeners(WebInspector.ResourceTreeModel.EventTypes.CachedResourcesLoaded);
     },