<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[182055] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/182055">182055</a></dd>
<dt>Author</dt> <dd>timothy@apple.com</dd>
<dt>Date</dt> <dd>2015-03-27 00:26:35 -0700 (Fri, 27 Mar 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Convert more misc View classes to ES6
https://bugs.webkit.org/show_bug.cgi?id=143128
Reviewed by Joseph Pecoraro.
* UserInterface/Views/CompletionSuggestionsView.js:
* UserInterface/Views/ComputedStyleDetailsPanel.js:
* UserInterface/Views/DashboardContainerView.js:
* UserInterface/Views/DashboardView.js:
* UserInterface/Views/DebuggerDashboardView.js:
* UserInterface/Views/DefaultDashboardView.js:
* UserInterface/Views/FilterBarButton.js:
* UserInterface/Views/MetricsStyleDetailsPanel.js:
* UserInterface/Views/ObjectPreviewView.js:
* UserInterface/Views/ObjectTreeView.js:
* UserInterface/Views/QuickConsole.js:
* UserInterface/Views/ReplayDashboardView.js:
* UserInterface/Views/RulesStyleDetailsPanel.js:
* UserInterface/Views/StyleDetailsPanel.js:
Converted to ES6 classes.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCompletionSuggestionsViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDashboardContainerViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDashboardViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/DashboardView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDebuggerDashboardViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDefaultDashboardViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsFilterBarButtonjs">trunk/Source/WebInspectorUI/UserInterface/Views/FilterBarButton.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsMetricsStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsObjectPreviewViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsQuickConsolejs">trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsReplayDashboardViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ReplayDashboardView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRulesStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (182054 => 182055)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-03-27 07:26:27 UTC (rev 182054)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-03-27 07:26:35 UTC (rev 182055)
</span><span class="lines">@@ -1,5 +1,28 @@
</span><span class="cx"> 2015-03-26 Timothy Hatcher <timothy@apple.com>
</span><span class="cx">
</span><ins>+ Web Inspector: Convert more misc View classes to ES6
+ https://bugs.webkit.org/show_bug.cgi?id=143128
+
+ Reviewed by Joseph Pecoraro.
+
+ * UserInterface/Views/CompletionSuggestionsView.js:
+ * UserInterface/Views/ComputedStyleDetailsPanel.js:
+ * UserInterface/Views/DashboardContainerView.js:
+ * UserInterface/Views/DashboardView.js:
+ * UserInterface/Views/DebuggerDashboardView.js:
+ * UserInterface/Views/DefaultDashboardView.js:
+ * UserInterface/Views/FilterBarButton.js:
+ * UserInterface/Views/MetricsStyleDetailsPanel.js:
+ * UserInterface/Views/ObjectPreviewView.js:
+ * UserInterface/Views/ObjectTreeView.js:
+ * UserInterface/Views/QuickConsole.js:
+ * UserInterface/Views/ReplayDashboardView.js:
+ * UserInterface/Views/RulesStyleDetailsPanel.js:
+ * UserInterface/Views/StyleDetailsPanel.js:
+ Converted to ES6 classes.
+
+2015-03-26 Timothy Hatcher <timothy@apple.com>
+
</ins><span class="cx"> Web Inspector: Convert TextEditor classes to ES6
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=143127
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCompletionSuggestionsViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js (182054 => 182055)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js 2015-03-27 07:26:27 UTC (rev 182054)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js 2015-03-27 07:26:35 UTC (rev 182055)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,50 +23,43 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.CompletionSuggestionsView = function(delegate)
</del><ins>+WebInspector.CompletionSuggestionsView = class CompletionSuggestionsView extends WebInspector.Object
</ins><span class="cx"> {
</span><del>- // FIXME: Convert this to a WebInspector.Object subclass, and call super().
- // WebInspector.Object.call(this);
</del><ins>+ constructor(delegate)
+ {
+ super();
</ins><span class="cx">
</span><del>- this._delegate = delegate || null;
</del><ins>+ this._delegate = delegate || null;
</ins><span class="cx">
</span><del>- this._selectedIndex = NaN;
</del><ins>+ this._selectedIndex = NaN;
</ins><span class="cx">
</span><del>- this._element = document.createElement("div");
- this._element.className = WebInspector.CompletionSuggestionsView.StyleClassName;
</del><ins>+ this._element = document.createElement("div");
+ this._element.className = WebInspector.CompletionSuggestionsView.StyleClassName;
</ins><span class="cx">
</span><del>- this._containerElement = document.createElement("div");
- this._containerElement.className = WebInspector.CompletionSuggestionsView.ContainerElementStyleClassName;
- this._containerElement.addEventListener("mousedown", this._mouseDown.bind(this));
- this._containerElement.addEventListener("mouseup", this._mouseUp.bind(this));
- this._containerElement.addEventListener("click", this._itemClicked.bind(this));
- this._element.appendChild(this._containerElement);
-};
</del><ins>+ this._containerElement = document.createElement("div");
+ this._containerElement.className = WebInspector.CompletionSuggestionsView.ContainerElementStyleClassName;
+ this._containerElement.addEventListener("mousedown", this._mouseDown.bind(this));
+ this._containerElement.addEventListener("mouseup", this._mouseUp.bind(this));
+ this._containerElement.addEventListener("click", this._itemClicked.bind(this));
+ this._element.appendChild(this._containerElement);
+ }
</ins><span class="cx">
</span><del>-WebInspector.CompletionSuggestionsView.StyleClassName = "completion-suggestions";
-WebInspector.CompletionSuggestionsView.ContainerElementStyleClassName = "completion-suggestions-container";
-WebInspector.CompletionSuggestionsView.ItemElementStyleClassName = "item";
-WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName = "selected";
-
-WebInspector.CompletionSuggestionsView.prototype = {
- constructor: WebInspector.CompletionSuggestionsView,
-
</del><span class="cx"> // Public
</span><span class="cx">
</span><span class="cx"> get delegate()
</span><span class="cx"> {
</span><span class="cx"> return this._delegate;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> get visible()
</span><span class="cx"> {
</span><span class="cx"> return !!this._element.parentNode;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> get selectedIndex()
</span><span class="cx"> {
</span><span class="cx"> return this._selectedIndex;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> set selectedIndex(index)
</span><span class="cx"> {
</span><span class="lines">@@ -82,9 +75,9 @@
</span><span class="cx">
</span><span class="cx"> selectedItemElement.classList.add(WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName);
</span><span class="cx"> selectedItemElement.scrollIntoViewIfNeeded(false);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- selectNext: function()
</del><ins>+ selectNext()
</ins><span class="cx"> {
</span><span class="cx"> var count = this._containerElement.children.length;
</span><span class="cx">
</span><span class="lines">@@ -96,9 +89,9 @@
</span><span class="cx"> var selectedItemElement = this._selectedItemElement;
</span><span class="cx"> if (selectedItemElement && this._delegate && typeof this._delegate.completionSuggestionsSelectedCompletion === "function")
</span><span class="cx"> this._delegate.completionSuggestionsSelectedCompletion(this, selectedItemElement.textContent);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- selectPrevious: function()
</del><ins>+ selectPrevious()
</ins><span class="cx"> {
</span><span class="cx"> if (isNaN(this._selectedIndex) || this._selectedIndex === 0)
</span><span class="cx"> this.selectedIndex = this._containerElement.children.length - 1;
</span><span class="lines">@@ -108,14 +101,14 @@
</span><span class="cx"> var selectedItemElement = this._selectedItemElement;
</span><span class="cx"> if (selectedItemElement && this._delegate && typeof this._delegate.completionSuggestionsSelectedCompletion === "function")
</span><span class="cx"> this._delegate.completionSuggestionsSelectedCompletion(this, selectedItemElement.textContent);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- isHandlingClickEvent: function()
</del><ins>+ isHandlingClickEvent()
</ins><span class="cx"> {
</span><span class="cx"> return this._mouseIsDown;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- show: function(anchorBounds)
</del><ins>+ show(anchorBounds)
</ins><span class="cx"> {
</span><span class="cx"> // Measure the container so we can know the intrinsic size of the items.
</span><span class="cx"> this._containerElement.style.position = "absolute";
</span><span class="lines">@@ -128,9 +121,9 @@
</span><span class="cx"> this._element.appendChild(this._containerElement);
</span><span class="cx">
</span><span class="cx"> // Lay out the suggest-box relative to the anchorBounds.
</span><del>- const margin = 10;
- const horizontalPadding = 22;
- const absoluteMaximumHeight = 160;
</del><ins>+ var margin = 10;
+ var horizontalPadding = 22;
+ var absoluteMaximumHeight = 160;
</ins><span class="cx">
</span><span class="cx"> var x = anchorBounds.origin.x;
</span><span class="cx"> var y = anchorBounds.origin.y + anchorBounds.size.height;
</span><span class="lines">@@ -161,14 +154,14 @@
</span><span class="cx"> this._element.style.height = height + "px";
</span><span class="cx">
</span><span class="cx"> document.body.appendChild(this._element);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- hide: function()
</del><ins>+ hide()
</ins><span class="cx"> {
</span><span class="cx"> this._element.remove();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- update: function(completions, selectedIndex)
</del><ins>+ update(completions, selectedIndex)
</ins><span class="cx"> {
</span><span class="cx"> this._containerElement.removeChildren();
</span><span class="cx">
</span><span class="lines">@@ -183,7 +176,7 @@
</span><span class="cx"> itemElement.classList.add(WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName);
</span><span class="cx"> this._containerElement.appendChild(itemElement);
</span><span class="cx"> }
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><span class="lines">@@ -195,23 +188,23 @@
</span><span class="cx"> var element = this._containerElement.children[this._selectedIndex] || null;
</span><span class="cx"> console.assert(element);
</span><span class="cx"> return element;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _mouseDown: function(event)
</del><ins>+ _mouseDown(event)
</ins><span class="cx"> {
</span><span class="cx"> if (event.button !== 0)
</span><span class="cx"> return;
</span><span class="cx"> this._mouseIsDown = true;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _mouseUp: function(event)
</del><ins>+ _mouseUp(event)
</ins><span class="cx"> {
</span><span class="cx"> if (event.button !== 0)
</span><span class="cx"> return;
</span><span class="cx"> this._mouseIsDown = false;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _itemClicked: function(event)
</del><ins>+ _itemClicked(event)
</ins><span class="cx"> {
</span><span class="cx"> if (event.button !== 0)
</span><span class="cx"> return;
</span><span class="lines">@@ -226,4 +219,7 @@
</span><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span><del>-WebInspector.CompletionSuggestionsView.prototype.__proto__ = WebInspector.Object.prototype;
</del><ins>+WebInspector.CompletionSuggestionsView.StyleClassName = "completion-suggestions";
+WebInspector.CompletionSuggestionsView.ContainerElementStyleClassName = "completion-suggestions-container";
+WebInspector.CompletionSuggestionsView.ItemElementStyleClassName = "item";
+WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName = "selected";
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js (182054 => 182055)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2015-03-27 07:26:27 UTC (rev 182054)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2015-03-27 07:26:35 UTC (rev 182055)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,82 +23,79 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.ComputedStyleDetailsPanel = function()
</del><ins>+WebInspector.ComputedStyleDetailsPanel = class ComputedStyleDetailsPanel extends WebInspector.StyleDetailsPanel
</ins><span class="cx"> {
</span><del>- WebInspector.StyleDetailsPanel.call(this, WebInspector.ComputedStyleDetailsPanel.StyleClassName, "computed", WebInspector.UIString("Computed"));
</del><ins>+ constructor()
+ {
+ super(WebInspector.ComputedStyleDetailsPanel.StyleClassName, "computed", WebInspector.UIString("Computed"));
</ins><span class="cx">
</span><del>- this._computedStyleShowAllSetting = new WebInspector.Setting("computed-style-show-all", false);
</del><ins>+ this._computedStyleShowAllSetting = new WebInspector.Setting("computed-style-show-all", false);
</ins><span class="cx">
</span><del>- var computedStyleShowAllLabel = document.createElement("label");
- computedStyleShowAllLabel.textContent = WebInspector.UIString("Show All");
</del><ins>+ var computedStyleShowAllLabel = document.createElement("label");
+ computedStyleShowAllLabel.textContent = WebInspector.UIString("Show All");
</ins><span class="cx">
</span><del>- this._computedStyleShowAllCheckbox = document.createElement("input");
- this._computedStyleShowAllCheckbox.type = "checkbox";
- this._computedStyleShowAllCheckbox.checked = this._computedStyleShowAllSetting.value;
- this._computedStyleShowAllCheckbox.addEventListener("change", this._computedStyleShowAllCheckboxValueChanged.bind(this));
- computedStyleShowAllLabel.appendChild(this._computedStyleShowAllCheckbox);
</del><ins>+ this._computedStyleShowAllCheckbox = document.createElement("input");
+ this._computedStyleShowAllCheckbox.type = "checkbox";
+ this._computedStyleShowAllCheckbox.checked = this._computedStyleShowAllSetting.value;
+ this._computedStyleShowAllCheckbox.addEventListener("change", this._computedStyleShowAllCheckboxValueChanged.bind(this));
+ computedStyleShowAllLabel.appendChild(this._computedStyleShowAllCheckbox);
</ins><span class="cx">
</span><del>- this._propertiesTextEditor = new WebInspector.CSSStyleDeclarationTextEditor(this);
- this._propertiesTextEditor.showsImplicitProperties = this._computedStyleShowAllSetting.value;
- this._propertiesTextEditor.alwaysShowPropertyNames = ["display", "width", "height"];
- this._propertiesTextEditor.sortProperties = true;
</del><ins>+ this._propertiesTextEditor = new WebInspector.CSSStyleDeclarationTextEditor(this);
+ this._propertiesTextEditor.showsImplicitProperties = this._computedStyleShowAllSetting.value;
+ this._propertiesTextEditor.alwaysShowPropertyNames = ["display", "width", "height"];
+ this._propertiesTextEditor.sortProperties = true;
</ins><span class="cx">
</span><del>- var propertiesRow = new WebInspector.DetailsSectionRow;
- var propertiesGroup = new WebInspector.DetailsSectionGroup([propertiesRow]);
- var propertiesSection = new WebInspector.DetailsSection("computed-style-properties", WebInspector.UIString("Properties"), [propertiesGroup], computedStyleShowAllLabel);
</del><ins>+ var propertiesRow = new WebInspector.DetailsSectionRow;
+ var propertiesGroup = new WebInspector.DetailsSectionGroup([propertiesRow]);
+ var propertiesSection = new WebInspector.DetailsSection("computed-style-properties", WebInspector.UIString("Properties"), [propertiesGroup], computedStyleShowAllLabel);
</ins><span class="cx">
</span><del>- propertiesRow.element.appendChild(this._propertiesTextEditor.element);
</del><ins>+ propertiesRow.element.appendChild(this._propertiesTextEditor.element);
</ins><span class="cx">
</span><del>- // Region flow name is used to display the "flow-from" property of the Region Containers.
- this._regionFlowFragment = document.createElement("span");
- this._regionFlowFragment.appendChild(document.createElement("img")).className = "icon";
- this._regionFlowNameLabelValue = this._regionFlowFragment.appendChild(document.createElement("span"));
</del><ins>+ // Region flow name is used to display the "flow-from" property of the Region Containers.
+ this._regionFlowFragment = document.createElement("span");
+ this._regionFlowFragment.appendChild(document.createElement("img")).className = "icon";
+ this._regionFlowNameLabelValue = this._regionFlowFragment.appendChild(document.createElement("span"));
</ins><span class="cx">
</span><del>- var goToRegionFlowButton = this._regionFlowFragment.appendChild(WebInspector.createGoToArrowButton());
- goToRegionFlowButton.addEventListener("click", this._goToRegionFlowArrowWasClicked.bind(this));
</del><ins>+ var goToRegionFlowButton = this._regionFlowFragment.appendChild(WebInspector.createGoToArrowButton());
+ goToRegionFlowButton.addEventListener("click", this._goToRegionFlowArrowWasClicked.bind(this));
</ins><span class="cx">
</span><del>- this._regionFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Region Flow"));
- this._regionFlowNameRow.element.classList.add("content-flow-link");
</del><ins>+ this._regionFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Region Flow"));
+ this._regionFlowNameRow.element.classList.add("content-flow-link");
</ins><span class="cx">
</span><del>- // Content flow name is used to display the "flow-into" property of the Content nodes.
- this._contentFlowFragment = document.createElement("span");
- this._contentFlowFragment.appendChild(document.createElement("img")).className = "icon";
- this._contentFlowNameLabelValue = this._contentFlowFragment.appendChild(document.createElement("span"));
</del><ins>+ // Content flow name is used to display the "flow-into" property of the Content nodes.
+ this._contentFlowFragment = document.createElement("span");
+ this._contentFlowFragment.appendChild(document.createElement("img")).className = "icon";
+ this._contentFlowNameLabelValue = this._contentFlowFragment.appendChild(document.createElement("span"));
</ins><span class="cx">
</span><del>- var goToContentFlowButton = this._contentFlowFragment.appendChild(WebInspector.createGoToArrowButton());
- goToContentFlowButton.addEventListener("click", this._goToContentFlowArrowWasClicked.bind(this));
</del><ins>+ var goToContentFlowButton = this._contentFlowFragment.appendChild(WebInspector.createGoToArrowButton());
+ goToContentFlowButton.addEventListener("click", this._goToContentFlowArrowWasClicked.bind(this));
</ins><span class="cx">
</span><del>- this._contentFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Content Flow"));
- this._contentFlowNameRow.element.classList.add("content-flow-link");
</del><ins>+ this._contentFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Content Flow"));
+ this._contentFlowNameRow.element.classList.add("content-flow-link");
</ins><span class="cx">
</span><del>- var flowNamesGroup = new WebInspector.DetailsSectionGroup([this._regionFlowNameRow, this._contentFlowNameRow]);
- this._flowNamesSection = new WebInspector.DetailsSection("content-flow", WebInspector.UIString("Flows"), [flowNamesGroup]);
</del><ins>+ var flowNamesGroup = new WebInspector.DetailsSectionGroup([this._regionFlowNameRow, this._contentFlowNameRow]);
+ this._flowNamesSection = new WebInspector.DetailsSection("content-flow", WebInspector.UIString("Flows"), [flowNamesGroup]);
</ins><span class="cx">
</span><del>- this._containerRegionsDataGrid = new WebInspector.DOMTreeDataGrid;
- this._containerRegionsDataGrid.element.classList.add("no-header");
</del><ins>+ this._containerRegionsDataGrid = new WebInspector.DOMTreeDataGrid;
+ this._containerRegionsDataGrid.element.classList.add("no-header");
</ins><span class="cx">
</span><del>- var containerRegionsRow = new WebInspector.DetailsSectionDataGridRow(this._containerRegionsDataGrid);
- var containerRegionsGroup = new WebInspector.DetailsSectionGroup([containerRegionsRow]);
- this._containerRegionsFlowSection = new WebInspector.DetailsSection("container-regions", WebInspector.UIString("Container Regions"), [containerRegionsGroup]);
</del><ins>+ var containerRegionsRow = new WebInspector.DetailsSectionDataGridRow(this._containerRegionsDataGrid);
+ var containerRegionsGroup = new WebInspector.DetailsSectionGroup([containerRegionsRow]);
+ this._containerRegionsFlowSection = new WebInspector.DetailsSection("container-regions", WebInspector.UIString("Container Regions"), [containerRegionsGroup]);
</ins><span class="cx">
</span><del>- this.element.appendChild(propertiesSection.element);
- this.element.appendChild(this._flowNamesSection.element);
- this.element.appendChild(this._containerRegionsFlowSection.element);
</del><ins>+ this.element.appendChild(propertiesSection.element);
+ this.element.appendChild(this._flowNamesSection.element);
+ this.element.appendChild(this._containerRegionsFlowSection.element);
</ins><span class="cx">
</span><del>- this._resetFlowDetails();
-};
</del><ins>+ this._resetFlowDetails();
+ }
</ins><span class="cx">
</span><del>-WebInspector.ComputedStyleDetailsPanel.StyleClassName = "computed";
-
-WebInspector.ComputedStyleDetailsPanel.prototype = {
- constructor: WebInspector.ComputedStyleDetailsPanel,
-
</del><span class="cx"> // Public
</span><span class="cx">
</span><span class="cx"> get regionFlow()
</span><span class="cx"> {
</span><span class="cx"> return this._regionFlow;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> set regionFlow(regionFlow)
</span><span class="cx"> {
</span><span class="lines">@@ -106,12 +103,12 @@
</span><span class="cx"> this._regionFlowNameLabelValue.textContent = regionFlow ? regionFlow.name : "";
</span><span class="cx"> this._regionFlowNameRow.value = regionFlow ? this._regionFlowFragment : null;
</span><span class="cx"> this._updateFlowNamesSectionVisibility();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> get contentFlow()
</span><span class="cx"> {
</span><span class="cx"> return this._contentFlow;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> set contentFlow(contentFlow)
</span><span class="cx"> {
</span><span class="lines">@@ -119,12 +116,12 @@
</span><span class="cx"> this._contentFlowNameLabelValue.textContent = contentFlow ? contentFlow.name : "";
</span><span class="cx"> this._contentFlowNameRow.value = contentFlow ? this._contentFlowFragment : null;
</span><span class="cx"> this._updateFlowNamesSectionVisibility();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> get containerRegions()
</span><span class="cx"> {
</span><span class="cx"> return this._containerRegions;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> set containerRegions(regions)
</span><span class="cx"> {
</span><span class="lines">@@ -140,50 +137,50 @@
</span><span class="cx"> this._containerRegionsDataGrid.appendChild(new WebInspector.DOMTreeDataGridNode(regionNode));
</span><span class="cx">
</span><span class="cx"> this._containerRegionsFlowSection.element.classList.remove("hidden");
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- refresh: function()
</del><ins>+ refresh()
</ins><span class="cx"> {
</span><span class="cx"> this._propertiesTextEditor.style = this.nodeStyles.computedStyle;
</span><span class="cx"> this._refreshFlowDetails(this.nodeStyles.node);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> // Protected
</span><span class="cx">
</span><del>- shown: function()
</del><ins>+ shown()
</ins><span class="cx"> {
</span><span class="cx"> WebInspector.StyleDetailsPanel.prototype.shown.call(this);
</span><span class="cx">
</span><span class="cx"> this._propertiesTextEditor.updateLayout();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- widthDidChange: function()
</del><ins>+ widthDidChange()
</ins><span class="cx"> {
</span><span class="cx"> this._propertiesTextEditor.updateLayout();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><del>- _computedStyleShowAllCheckboxValueChanged: function(event)
</del><ins>+ _computedStyleShowAllCheckboxValueChanged(event)
</ins><span class="cx"> {
</span><span class="cx"> var checked = this._computedStyleShowAllCheckbox.checked;
</span><span class="cx"> this._computedStyleShowAllSetting.value = checked;
</span><span class="cx"> this._propertiesTextEditor.showsImplicitProperties = checked;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _updateFlowNamesSectionVisibility: function()
</del><ins>+ _updateFlowNamesSectionVisibility()
</ins><span class="cx"> {
</span><span class="cx"> this._flowNamesSection.element.classList.toggle("hidden", !this._contentFlow && !this._regionFlow);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _resetFlowDetails : function()
</del><ins>+ _resetFlowDetails ()
</ins><span class="cx"> {
</span><span class="cx"> this.regionFlow = null;
</span><span class="cx"> this.contentFlow = null;
</span><span class="cx"> this.containerRegions = null;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _refreshFlowDetails: function(domNode)
</del><ins>+ _refreshFlowDetails(domNode)
</ins><span class="cx"> {
</span><span class="cx"> this._resetFlowDetails();
</span><span class="cx"> if (!domNode)
</span><span class="lines">@@ -203,17 +200,17 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> WebInspector.domTreeManager.getNodeContentFlowInfo(domNode, contentFlowInfoReady.bind(this));
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _goToRegionFlowArrowWasClicked: function()
</del><ins>+ _goToRegionFlowArrowWasClicked()
</ins><span class="cx"> {
</span><span class="cx"> WebInspector.resourceSidebarPanel.showContentFlowDOMTree(this._regionFlow);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _goToContentFlowArrowWasClicked: function()
</del><ins>+ _goToContentFlowArrowWasClicked()
</ins><span class="cx"> {
</span><span class="cx"> WebInspector.resourceSidebarPanel.showContentFlowDOMTree(this._contentFlow, this.nodeStyles.node, true);
</span><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span><del>-WebInspector.ComputedStyleDetailsPanel.prototype.__proto__ = WebInspector.StyleDetailsPanel.prototype;
</del><ins>+WebInspector.ComputedStyleDetailsPanel.StyleClassName = "computed";
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDashboardContainerViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.js (182054 => 182055)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.js 2015-03-27 07:26:27 UTC (rev 182054)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.js 2015-03-27 07:26:35 UTC (rev 182055)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,51 +23,35 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.DashboardContainerView = function() {
- // FIXME: Convert this to a WebInspector.Object subclass, and call super().
- // WebInspector.Object.call(this);
</del><ins>+WebInspector.DashboardContainerView = class DashboardContainerView extends WebInspector.Object
+{
+ constructor()
+ {
+ super();
</ins><span class="cx">
</span><del>- this._toolbarItem = new WebInspector.NavigationItem("dashboard-container", "group", WebInspector.UIString("Activity Viewer"));
</del><ins>+ this._toolbarItem = new WebInspector.NavigationItem("dashboard-container", "group", WebInspector.UIString("Activity Viewer"));
</ins><span class="cx">
</span><del>- this._advanceForwardArrowElement = this._toolbarItem.element.appendChild(document.createElement("div"));
- this._advanceForwardArrowElement.className = "advance-arrow advance-forward";
- this._advanceBackwardArrowElement = this._toolbarItem.element.appendChild(document.createElement("div"));
- this._advanceBackwardArrowElement.className = "advance-arrow advance-backward";
</del><ins>+ this._advanceForwardArrowElement = this._toolbarItem.element.appendChild(document.createElement("div"));
+ this._advanceForwardArrowElement.className = "advance-arrow advance-forward";
+ this._advanceBackwardArrowElement = this._toolbarItem.element.appendChild(document.createElement("div"));
+ this._advanceBackwardArrowElement.className = "advance-arrow advance-backward";
</ins><span class="cx">
</span><del>- this._advanceForwardArrowElement.addEventListener("click", this._advanceForwardArrowClicked.bind(this));
- this._advanceBackwardArrowElement.addEventListener("click", this._advanceBackwardArrowClicked.bind(this));
</del><ins>+ this._advanceForwardArrowElement.addEventListener("click", this._advanceForwardArrowClicked.bind(this));
+ this._advanceBackwardArrowElement.addEventListener("click", this._advanceBackwardArrowClicked.bind(this));
</ins><span class="cx">
</span><del>- // Represents currently open dashboards, with the most recent entries appended to the end.
- this._dashboardStack = [];
- this._currentIndex = -1;
</del><ins>+ // Represents currently open dashboards, with the most recent entries appended to the end.
+ this._dashboardStack = [];
+ this._currentIndex = -1;
</ins><span class="cx">
</span><del>- this._updateAdvanceArrowVisibility();
-};
</del><ins>+ this._updateAdvanceArrowVisibility();
+ }
</ins><span class="cx">
</span><del>-WebInspector.DashboardContainerView.VisibleDashboardStyleClassName = "visible";
-WebInspector.DashboardContainerView.InactiveStyleClassName = "inactive";
-
-WebInspector.DashboardContainerView.AdvanceDirection = {
- Forward: "dashboard-container-view-advance-direction-forward",
- Backward: "dashboard-container-view-advance-direction-backward",
- None: "dashboard-container-view-advance-direction-none"
-};
-
-WebInspector.DashboardContainerView.ForwardIncomingDashboardStyleClassName = "slide-in-down";
-WebInspector.DashboardContainerView.BackwardIncomingDashboardStyleClassName = "slide-in-up";
-WebInspector.DashboardContainerView.ForwardOutgoingDashboardStyleClassName = "slide-out-down";
-WebInspector.DashboardContainerView.BackwardOutgoingDashboardStyleClassName = "slide-out-up";
-
-WebInspector.DashboardContainerView.prototype = {
- constructor: WebInspector.DashboardContainerView,
- __proto__: WebInspector.Object.prototype,
-
</del><span class="cx"> // Public
</span><span class="cx">
</span><span class="cx"> get toolbarItem()
</span><span class="cx"> {
</span><span class="cx"> return this._toolbarItem;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> get currentDashboardView()
</span><span class="cx"> {
</span><span class="lines">@@ -75,9 +59,9 @@
</span><span class="cx"> return null;
</span><span class="cx">
</span><span class="cx"> return this._dashboardStack[this._currentIndex];
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- showDashboardViewForRepresentedObject: function(representedObject)
</del><ins>+ showDashboardViewForRepresentedObject(representedObject)
</ins><span class="cx"> {
</span><span class="cx"> var dashboardView = this._dashboardViewForRepresentedObject(representedObject);
</span><span class="cx"> if (!dashboardView)
</span><span class="lines">@@ -89,9 +73,9 @@
</span><span class="cx"> var index = this._dashboardStack.indexOf(dashboardView);
</span><span class="cx"> this._showDashboardAtIndex(index);
</span><span class="cx"> return dashboardView;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- hideDashboardViewForRepresentedObject: function(representedObject)
</del><ins>+ hideDashboardViewForRepresentedObject(representedObject)
</ins><span class="cx"> {
</span><span class="cx"> var onlyReturnExistingViews = true;
</span><span class="cx"> var dashboardView = this._dashboardViewForRepresentedObject(representedObject, onlyReturnExistingViews);
</span><span class="lines">@@ -101,9 +85,9 @@
</span><span class="cx">
</span><span class="cx"> console.assert(this._currentIndex > 0);
</span><span class="cx"> this._showDashboardAtIndex(this._currentIndex - 1);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- closeDashboardViewForRepresentedObject: function(representedObject)
</del><ins>+ closeDashboardViewForRepresentedObject(representedObject)
</ins><span class="cx"> {
</span><span class="cx"> var onlyReturnExistingViews = true;
</span><span class="cx"> var dashboardView = this._dashboardViewForRepresentedObject(representedObject, onlyReturnExistingViews);
</span><span class="lines">@@ -111,35 +95,35 @@
</span><span class="cx"> return null;
</span><span class="cx">
</span><span class="cx"> this._closeDashboardView(dashboardView);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><del>- _advanceForwardArrowClicked: function()
</del><ins>+ _advanceForwardArrowClicked()
</ins><span class="cx"> {
</span><span class="cx"> this._showDashboardAtIndex(this._currentIndex + 1);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _advanceBackwardArrowClicked: function()
</del><ins>+ _advanceBackwardArrowClicked()
</ins><span class="cx"> {
</span><span class="cx"> this._showDashboardAtIndex(this._currentIndex - 1);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _dismissAdvanceArrows: function()
</del><ins>+ _dismissAdvanceArrows()
</ins><span class="cx"> {
</span><span class="cx"> this._advanceForwardArrowElement.classList.add(WebInspector.DashboardContainerView.InactiveStyleClassName);
</span><span class="cx"> this._advanceBackwardArrowElement.classList.add(WebInspector.DashboardContainerView.InactiveStyleClassName);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _updateAdvanceArrowVisibility: function()
</del><ins>+ _updateAdvanceArrowVisibility()
</ins><span class="cx"> {
</span><span class="cx"> var canAdvanceForward = this._currentIndex < this._dashboardStack.length - 1;
</span><span class="cx"> var canAdvanceBackward = this._currentIndex > 0;
</span><span class="cx"> this._advanceForwardArrowElement.classList.toggle(WebInspector.DashboardContainerView.InactiveStyleClassName, !canAdvanceForward);
</span><span class="cx"> this._advanceBackwardArrowElement.classList.toggle(WebInspector.DashboardContainerView.InactiveStyleClassName, !canAdvanceBackward);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _dashboardViewForRepresentedObject: function(representedObject, onlyReturnExistingViews)
</del><ins>+ _dashboardViewForRepresentedObject(representedObject, onlyReturnExistingViews)
</ins><span class="cx"> {
</span><span class="cx"> console.assert(representedObject);
</span><span class="cx">
</span><span class="lines">@@ -154,9 +138,9 @@
</span><span class="cx">
</span><span class="cx"> try {
</span><span class="cx"> // No existing content view found, make a new one.
</span><del>- dashboardView = new WebInspector.DashboardView(representedObject);
</del><ins>+ dashboardView = WebInspector.DashboardView.create(representedObject);
</ins><span class="cx"> } catch (e) {
</span><del>- console.error(e);
</del><ins>+ console.error(e, e.stack);
</ins><span class="cx"> return null;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -164,9 +148,9 @@
</span><span class="cx"> this._toolbarItem.element.appendChild(dashboardView.element);
</span><span class="cx">
</span><span class="cx"> return dashboardView;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _showDashboardAtIndex: function(index)
</del><ins>+ _showDashboardAtIndex(index)
</ins><span class="cx"> {
</span><span class="cx"> console.assert(index >= 0 && index <= this._dashboardStack.length - 1);
</span><span class="cx">
</span><span class="lines">@@ -185,9 +169,9 @@
</span><span class="cx">
</span><span class="cx"> this._currentIndex = index;
</span><span class="cx"> this._showDashboardView(this.currentDashboardView, isInitialDashboard ? initialDirection : advanceDirection);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _showDashboardView: function(dashboardView, advanceDirection)
</del><ins>+ _showDashboardView(dashboardView, advanceDirection)
</ins><span class="cx"> {
</span><span class="cx"> console.assert(dashboardView instanceof WebInspector.DashboardView);
</span><span class="cx">
</span><span class="lines">@@ -203,23 +187,24 @@
</span><span class="cx"> var container = this;
</span><span class="cx"> dashboardView.element.classList.add(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
</span><span class="cx">
</span><ins>+ function animationEnded(event) {
+ if (event.target !== dashboardView.element)
+ return;
+
+ dashboardView.element.removeEventListener("webkitAnimationEnd", animationEnded);
+ dashboardView.element.classList.remove(animationClass);
+ container._updateAdvanceArrowVisibility();
+ }
+
</ins><span class="cx"> if (animationClass) {
</span><del>- function animationEnded(event) {
- if (event.target !== dashboardView.element)
- return;
-
- dashboardView.element.removeEventListener("webkitAnimationEnd", animationEnded);
- dashboardView.element.classList.remove(animationClass);
- container._updateAdvanceArrowVisibility();
- }
</del><span class="cx"> dashboardView.element.classList.add(animationClass);
</span><span class="cx"> dashboardView.element.addEventListener("webkitAnimationEnd", animationEnded);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> return dashboardView;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _hideDashboardView: function(dashboardView, advanceDirection, callback)
</del><ins>+ _hideDashboardView(dashboardView, advanceDirection, callback)
</ins><span class="cx"> {
</span><span class="cx"> console.assert(dashboardView instanceof WebInspector.DashboardView);
</span><span class="cx"> console.assert(this.currentDashboardView === dashboardView);
</span><span class="lines">@@ -235,26 +220,27 @@
</span><span class="cx">
</span><span class="cx"> var container = this;
</span><span class="cx">
</span><del>- if (animationClass) {
- function animationEnded(event) {
- if (event.target !== dashboardView.element)
- return;
</del><ins>+ function animationEnded(event) {
+ if (event.target !== dashboardView.element)
+ return;
</ins><span class="cx">
</span><del>- dashboardView.element.removeEventListener("webkitAnimationEnd", animationEnded);
- dashboardView.element.classList.remove(animationClass);
- dashboardView.element.classList.remove(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
- container._updateAdvanceArrowVisibility();
</del><ins>+ dashboardView.element.removeEventListener("webkitAnimationEnd", animationEnded);
+ dashboardView.element.classList.remove(animationClass);
+ dashboardView.element.classList.remove(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
+ container._updateAdvanceArrowVisibility();
</ins><span class="cx">
</span><del>- if (typeof callback === "function")
- callback();
- }
</del><ins>+ if (typeof callback === "function")
+ callback();
+ }
+
+ if (animationClass) {
</ins><span class="cx"> dashboardView.element.classList.add(animationClass);
</span><span class="cx"> dashboardView.element.addEventListener("webkitAnimationEnd", animationEnded);
</span><span class="cx"> } else
</span><span class="cx"> dashboardView.element.classList.remove(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _closeDashboardView: function(dashboardView)
</del><ins>+ _closeDashboardView(dashboardView)
</ins><span class="cx"> {
</span><span class="cx"> console.assert(dashboardView instanceof WebInspector.DashboardView);
</span><span class="cx">
</span><span class="lines">@@ -282,3 +268,17 @@
</span><span class="cx"> this._updateAdvanceArrowVisibility();
</span><span class="cx"> }
</span><span class="cx"> };
</span><ins>+
+WebInspector.DashboardContainerView.VisibleDashboardStyleClassName = "visible";
+WebInspector.DashboardContainerView.InactiveStyleClassName = "inactive";
+
+WebInspector.DashboardContainerView.AdvanceDirection = {
+ Forward: Symbol("dashboard-container-view-advance-direction-forward"),
+ Backward: Symbol("dashboard-container-view-advance-direction-backward"),
+ None: Symbol("dashboard-container-view-advance-direction-none")
+};
+
+WebInspector.DashboardContainerView.ForwardIncomingDashboardStyleClassName = "slide-in-down";
+WebInspector.DashboardContainerView.BackwardIncomingDashboardStyleClassName = "slide-in-up";
+WebInspector.DashboardContainerView.ForwardOutgoingDashboardStyleClassName = "slide-out-down";
+WebInspector.DashboardContainerView.BackwardOutgoingDashboardStyleClassName = "slide-out-up";
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDashboardViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DashboardView.js (182054 => 182055)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DashboardView.js 2015-03-27 07:26:27 UTC (rev 182054)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DashboardView.js 2015-03-27 07:26:35 UTC (rev 182055)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,10 +23,25 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.DashboardView = function(representedObject, identifier)
</del><ins>+WebInspector.DashboardView = class DashboardView extends WebInspector.Object
</ins><span class="cx"> {
</span><del>- // Creating a new DashboardView directly returns an instance of the proper subclass.
- if (this.constructor === WebInspector.DashboardView) {
</del><ins>+ constructor(representedObject, identifier)
+ {
+ console.assert(identifier);
+
+ super();
+
+ this._representedObject = representedObject;
+
+ this._element = document.createElement("div");
+ this._element.classList.add(WebInspector.DashboardView.StyleClassName);
+ this._element.classList.add(identifier);
+ }
+
+ // Static
+
+ static create(representedObject)
+ {
</ins><span class="cx"> console.assert(representedObject);
</span><span class="cx">
</span><span class="cx"> if (representedObject instanceof WebInspector.DefaultDashboard)
</span><span class="lines">@@ -41,50 +56,32 @@
</span><span class="cx"> throw "Can't make a DashboardView for an unknown representedObject.";
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // Otherwise, a subclass is calling the base constructor.
- console.assert(this.constructor !== WebInspector.DashboardView && this instanceof WebInspector.DashboardView);
- console.assert(identifier);
-
- // FIXME: Convert this to a WebInspector.Object subclass, and call super().
- // WebInspector.Object.call(this);
-
- this._representedObject = representedObject;
-
- this._element = document.createElement("div");
- this._element.classList.add(WebInspector.DashboardView.StyleClassName);
- this._element.classList.add(identifier);
-};
-
-WebInspector.DashboardView.StyleClassName = "dashboard";
-
-WebInspector.DashboardView.prototype = {
- constructor: WebInspector.DashboardView,
- __proto__: WebInspector.Object.prototype,
-
</del><span class="cx"> // Public
</span><span class="cx">
</span><span class="cx"> get element()
</span><span class="cx"> {
</span><span class="cx"> return this._element;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> get representedObject()
</span><span class="cx"> {
</span><span class="cx"> return this._representedObject;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- shown: function()
</del><ins>+ shown()
</ins><span class="cx"> {
</span><span class="cx"> // Implemented by subclasses.
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- hidden: function()
</del><ins>+ hidden()
</ins><span class="cx"> {
</span><span class="cx"> // Implemented by subclasses.
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- closed: function()
</del><ins>+ closed()
</ins><span class="cx"> {
</span><span class="cx"> // Implemented by subclasses.
</span><span class="cx"> }
</span><span class="cx"> };
</span><ins>+
+WebInspector.DashboardView.StyleClassName = "dashboard";
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDebuggerDashboardViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js (182054 => 182055)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js 2015-03-27 07:26:27 UTC (rev 182054)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js 2015-03-27 07:26:35 UTC (rev 182055)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2014 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,57 +23,48 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.DebuggerDashboardView = function(representedObject)
</del><ins>+WebInspector.DebuggerDashboardView = class DebuggerDashboardView extends WebInspector.DashboardView
</ins><span class="cx"> {
</span><del>- WebInspector.DashboardView.call(this, representedObject, "debugger");
</del><ins>+ constructor(representedObject)
+ {
+ super(representedObject, "debugger");
</ins><span class="cx">
</span><del>- WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._rebuildLocation, this);
</del><ins>+ WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._rebuildLocation, this);
</ins><span class="cx">
</span><del>- this._navigationBar = new WebInspector.NavigationBar;
- this.element.appendChild(this._navigationBar.element);
</del><ins>+ this._navigationBar = new WebInspector.NavigationBar;
+ this.element.appendChild(this._navigationBar.element);
</ins><span class="cx">
</span><del>- var resumeImage;
- if (WebInspector.Platform.isLegacyMacOS)
- resumeImage = {src: "Images/Legacy/Resume.svg", width: 16, height: 16};
- else
- resumeImage = {src: "Images/Resume.svg", width: 15, height: 15};
</del><ins>+ var resumeImage;
+ if (WebInspector.Platform.isLegacyMacOS)
+ resumeImage = {src: "Images/Legacy/Resume.svg", width: 16, height: 16};
+ else
+ resumeImage = {src: "Images/Resume.svg", width: 15, height: 15};
</ins><span class="cx">
</span><del>- var tooltip = WebInspector.UIString("Continue script execution (%s or %s)").format(WebInspector.debuggerSidebarPanel.pauseOrResumeKeyboardShortcut.displayName, WebInspector.debuggerSidebarPanel.pauseOrResumeAlternateKeyboardShortcut.displayName);
- this._debuggerResumeButtonItem = new WebInspector.ActivateButtonNavigationItem("debugger-dashboard-pause", tooltip, tooltip, resumeImage.src, resumeImage.width, resumeImage.height, true);
- this._debuggerResumeButtonItem.activated = true;
- this._debuggerResumeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._resumeButtonClicked, this);
- this._navigationBar.addNavigationItem(this._debuggerResumeButtonItem);
</del><ins>+ var tooltip = WebInspector.UIString("Continue script execution (%s or %s)").format(WebInspector.debuggerSidebarPanel.pauseOrResumeKeyboardShortcut.displayName, WebInspector.debuggerSidebarPanel.pauseOrResumeAlternateKeyboardShortcut.displayName);
+ this._debuggerResumeButtonItem = new WebInspector.ActivateButtonNavigationItem("debugger-dashboard-pause", tooltip, tooltip, resumeImage.src, resumeImage.width, resumeImage.height, true);
+ this._debuggerResumeButtonItem.activated = true;
+ this._debuggerResumeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._resumeButtonClicked, this);
+ this._navigationBar.addNavigationItem(this._debuggerResumeButtonItem);
</ins><span class="cx">
</span><del>- var message = this._messageElement = document.createElement("div");
- message.classList.add(WebInspector.DebuggerDashboardView.MessageStyleClassName);
- message.title = message.textContent = WebInspector.UIString("Debugger Paused");
- this.element.appendChild(message);
</del><ins>+ var message = this._messageElement = document.createElement("div");
+ message.classList.add(WebInspector.DebuggerDashboardView.MessageStyleClassName);
+ message.title = message.textContent = WebInspector.UIString("Debugger Paused");
+ this.element.appendChild(message);
</ins><span class="cx">
</span><del>- var dividerElement = document.createElement("div");
- dividerElement.classList.add(WebInspector.DebuggerDashboardView.DividerStyleClassName);
- this.element.appendChild(dividerElement);
</del><ins>+ var dividerElement = document.createElement("div");
+ dividerElement.classList.add(WebInspector.DebuggerDashboardView.DividerStyleClassName);
+ this.element.appendChild(dividerElement);
</ins><span class="cx">
</span><del>- var locationElement = this._locationElement = document.createElement("div");
- locationElement.classList.add(WebInspector.DebuggerDashboardView.LocationStyleClassName);
- this.element.appendChild(locationElement);
</del><ins>+ var locationElement = this._locationElement = document.createElement("div");
+ locationElement.classList.add(WebInspector.DebuggerDashboardView.LocationStyleClassName);
+ this.element.appendChild(locationElement);
</ins><span class="cx">
</span><del>- this._rebuildLocation();
-};
</del><ins>+ this._rebuildLocation();
+ }
</ins><span class="cx">
</span><del>-WebInspector.DebuggerDashboardView.FunctionIconStyleClassName = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
-WebInspector.DebuggerDashboardView.EventListenerIconStyleClassName = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
</del><ins>+ // Private
</ins><span class="cx">
</span><del>-WebInspector.DebuggerDashboardView.IconStyleClassName = "icon";
-WebInspector.DebuggerDashboardView.MessageStyleClassName = "message";
-WebInspector.DebuggerDashboardView.DividerStyleClassName = "divider";
-WebInspector.DebuggerDashboardView.LocationStyleClassName = "location";
-WebInspector.DebuggerDashboardView.FunctionNameStyleClassName = "function-name";
-
-WebInspector.DebuggerDashboardView.prototype = {
- constructor: WebInspector.DebuggerDashboardView,
- __proto__: WebInspector.DashboardView.prototype,
-
- _rebuildLocation: function()
</del><ins>+ _rebuildLocation()
</ins><span class="cx"> {
</span><span class="cx"> if (!WebInspector.debuggerManager.activeCallFrame)
</span><span class="cx"> return;
</span><span class="lines">@@ -107,10 +98,19 @@
</span><span class="cx"> var shouldPreventLinkFloat = true;
</span><span class="cx"> var linkElement = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, shouldPreventLinkFloat);
</span><span class="cx"> this._locationElement.appendChild(linkElement);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _resumeButtonClicked: function()
</del><ins>+ _resumeButtonClicked()
</ins><span class="cx"> {
</span><span class="cx"> WebInspector.debuggerManager.resume();
</span><span class="cx"> }
</span><span class="cx"> };
</span><ins>+
+WebInspector.DebuggerDashboardView.FunctionIconStyleClassName = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
+WebInspector.DebuggerDashboardView.EventListenerIconStyleClassName = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
+
+WebInspector.DebuggerDashboardView.IconStyleClassName = "icon";
+WebInspector.DebuggerDashboardView.MessageStyleClassName = "message";
+WebInspector.DebuggerDashboardView.DividerStyleClassName = "divider";
+WebInspector.DebuggerDashboardView.LocationStyleClassName = "location";
+WebInspector.DebuggerDashboardView.FunctionNameStyleClassName = "function-name";
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDefaultDashboardViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.js (182054 => 182055)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.js 2015-03-27 07:26:27 UTC (rev 182054)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.js 2015-03-27 07:26:35 UTC (rev 182055)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,52 +23,48 @@
</span><span class="cx"> * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.DefaultDashboardView = function(representedObject)
</del><ins>+WebInspector.DefaultDashboardView = class DefaultDashboardView extends WebInspector.DashboardView
</ins><span class="cx"> {
</span><del>- WebInspector.DashboardView.call(this, representedObject, "default");
</del><ins>+ constructor(representedObject)
+ {
+ super(representedObject, "default");
</ins><span class="cx">
</span><del>- representedObject.addEventListener(WebInspector.DefaultDashboard.Event.DataDidChange, window.requestAnimationFrame.bind(null, this._updateDisplay.bind(this)));
</del><ins>+ representedObject.addEventListener(WebInspector.DefaultDashboard.Event.DataDidChange, window.requestAnimationFrame.bind(null, this._updateDisplay.bind(this)));
</ins><span class="cx">
</span><del>- this._items = {
- resourcesCount: {
- tooltip: WebInspector.UIString("Total number of resources, click to show the Resources navigation sidebar"),
- handler: this._resourcesWasClicked
- },
- resourcesSize: {
- tooltip: WebInspector.UIString("Total size of all resources, click to show the Network Requests timeline"),
- handler: this._networkItemWasClicked
- },
- time: {
- tooltip: WebInspector.UIString("Time until the load event fired, click to show the Network Requests timeline"),
- handler: this._networkItemWasClicked
- },
- logs: {
- tooltip: WebInspector.UIString("Console logs, click to show the Console"),
- handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Logs)
- },
- errors: {
- tooltip: WebInspector.UIString("Console errors, click to show the Console"),
- handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Errors)
- },
- issues: {
- tooltip: WebInspector.UIString("Console warnings, click to show the Console"),
- handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Warnings)
- }
- };
</del><ins>+ this._items = {
+ resourcesCount: {
+ tooltip: WebInspector.UIString("Total number of resources, click to show the Resources navigation sidebar"),
+ handler: this._resourcesWasClicked
+ },
+ resourcesSize: {
+ tooltip: WebInspector.UIString("Total size of all resources, click to show the Network Requests timeline"),
+ handler: this._networkItemWasClicked
+ },
+ time: {
+ tooltip: WebInspector.UIString("Time until the load event fired, click to show the Network Requests timeline"),
+ handler: this._networkItemWasClicked
+ },
+ logs: {
+ tooltip: WebInspector.UIString("Console logs, click to show the Console"),
+ handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Logs)
+ },
+ errors: {
+ tooltip: WebInspector.UIString("Console errors, click to show the Console"),
+ handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Errors)
+ },
+ issues: {
+ tooltip: WebInspector.UIString("Console warnings, click to show the Console"),
+ handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Warnings)
+ }
+ };
</ins><span class="cx">
</span><del>- for (var name in this._items)
- this._appendElementForNamedItem(name);
-};
-
-WebInspector.DefaultDashboardView.EnabledItemStyleClassName = "enabled";
-
-WebInspector.DefaultDashboardView.prototype = {
- constructor: WebInspector.DefaultDashboardView,
- __proto__: WebInspector.DashboardView.prototype,
-
</del><ins>+ for (var name in this._items)
+ this._appendElementForNamedItem(name);
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><del>- _updateDisplay: function()
</del><ins>+ _updateDisplay()
</ins><span class="cx"> {
</span><span class="cx"> var dashboard = this.representedObject;
</span><span class="cx">
</span><span class="lines">@@ -86,14 +82,14 @@
</span><span class="cx"> var sizeItem = this._items.resourcesSize;
</span><span class="cx"> sizeItem.text = dashboard.resourcesSize ? Number.bytesToString(dashboard.resourcesSize, false) : "\u2014";
</span><span class="cx"> this._setItemEnabled(sizeItem, dashboard.resourcesSize > 0);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _formatPossibleLargeNumber: function(number)
</del><ins>+ _formatPossibleLargeNumber(number)
</ins><span class="cx"> {
</span><span class="cx"> return number > 999 ? WebInspector.UIString("999+") : number;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _appendElementForNamedItem: function(name)
</del><ins>+ _appendElementForNamedItem(name)
</ins><span class="cx"> {
</span><span class="cx"> var item = this._items[name];
</span><span class="cx">
</span><span class="lines">@@ -105,8 +101,7 @@
</span><span class="cx">
</span><span class="cx"> item.outlet = item.container.appendChild(document.createElement("div"));
</span><span class="cx">
</span><del>- Object.defineProperty(item, "text",
- {
</del><ins>+ Object.defineProperty(item, "text", {
</ins><span class="cx"> set: function(newText)
</span><span class="cx"> {
</span><span class="cx"> if (newText === item.outlet.textContent)
</span><span class="lines">@@ -118,9 +113,9 @@
</span><span class="cx"> item.container.addEventListener("click", function(event) {
</span><span class="cx"> this._itemWasClicked(name);
</span><span class="cx"> }.bind(this));
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _itemWasClicked: function(name)
</del><ins>+ _itemWasClicked(name)
</ins><span class="cx"> {
</span><span class="cx"> var item = this._items[name];
</span><span class="cx"> if (!item.container.classList.contains(WebInspector.DefaultDashboardView.EnabledItemStyleClassName))
</span><span class="lines">@@ -128,25 +123,25 @@
</span><span class="cx">
</span><span class="cx"> if (item.handler)
</span><span class="cx"> item.handler.call(this);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _resourcesWasClicked: function()
</del><ins>+ _resourcesWasClicked()
</ins><span class="cx"> {
</span><span class="cx"> WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.resourceSidebarPanel;
</span><span class="cx"> WebInspector.navigationSidebar.collapsed = false;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _networkItemWasClicked: function()
</del><ins>+ _networkItemWasClicked()
</ins><span class="cx"> {
</span><span class="cx"> WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.timelineSidebarPanel;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _consoleItemWasClicked: function(scope)
</del><ins>+ _consoleItemWasClicked(scope)
</ins><span class="cx"> {
</span><span class="cx"> WebInspector.showConsoleView(scope);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _setConsoleItemValue: function(itemName, newValue)
</del><ins>+ _setConsoleItemValue(itemName, newValue)
</ins><span class="cx"> {
</span><span class="cx"> var iVarName = "_" + itemName;
</span><span class="cx"> var previousValue = this[iVarName];
</span><span class="lines">@@ -178,9 +173,9 @@
</span><span class="cx"> container.addEventListener("webkitAnimationEnd", animationEnded);
</span><span class="cx">
</span><span class="cx"> container.classList.add("pulsing");
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _setItemEnabled: function(item, enabled)
</del><ins>+ _setItemEnabled(item, enabled)
</ins><span class="cx"> {
</span><span class="cx"> if (enabled)
</span><span class="cx"> item.container.classList.add(WebInspector.DefaultDashboardView.EnabledItemStyleClassName);
</span><span class="lines">@@ -188,3 +183,5 @@
</span><span class="cx"> item.container.classList.remove(WebInspector.DefaultDashboardView.EnabledItemStyleClassName);
</span><span class="cx"> }
</span><span class="cx"> };
</span><ins>+
+WebInspector.DefaultDashboardView.EnabledItemStyleClassName = "enabled";
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsFilterBarButtonjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FilterBarButton.js (182054 => 182055)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/FilterBarButton.js 2015-03-27 07:26:27 UTC (rev 182054)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FilterBarButton.js 2015-03-27 07:26:35 UTC (rev 182055)
</span><span class="lines">@@ -23,38 +23,34 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.FilterBarButton = function(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss, role)
</del><ins>+WebInspector.FilterBarButton = class FilterBarButton extends WebInspector.ActivateButtonNavigationItem
</ins><span class="cx"> {
</span><del>- WebInspector.ActivateButtonNavigationItem.call(this, identifier, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss, role);
</del><ins>+ constructor(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss, role)
+ {
+ super(identifier, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss, role);
</ins><span class="cx">
</span><del>- this._filterFunction = filterFunction;
</del><ins>+ this._filterFunction = filterFunction;
</ins><span class="cx">
</span><del>- this._activatedSetting = new WebInspector.Setting(identifier, activatedByDefault);
</del><ins>+ this._activatedSetting = new WebInspector.Setting(identifier, activatedByDefault);
</ins><span class="cx">
</span><del>- this.activated = !!this._activatedSetting.value;
-};
</del><ins>+ this.activated = !!this._activatedSetting.value;
+ }
</ins><span class="cx">
</span><del>-WebInspector.FilterBarButton.StyleClassName = "filter-bar-button";
-
-WebInspector.FilterBarButton.Event = {
- ActivatedStateToggled: "filter-bar-activated-state-toggled"
-};
-
-WebInspector.FilterBarButton.prototype = {
- constructor: WebInspector.FilterBarButton,
- __proto__: WebInspector.ActivateButtonNavigationItem.prototype,
-
</del><span class="cx"> // Public
</span><span class="cx">
</span><span class="cx"> get filterFunction()
</span><span class="cx"> {
</span><span class="cx"> return this._filterFunction;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- toggle: function()
</del><ins>+ toggle()
</ins><span class="cx"> {
</span><span class="cx"> this.activated = !this.activated;
</span><span class="cx"> this._activatedSetting.value = this.activated;
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.FilterBarButton.Event.ActivatedStateToggled);
</span><span class="cx"> }
</span><span class="cx"> };
</span><ins>+
+WebInspector.FilterBarButton.Event = {
+ ActivatedStateToggled: "filter-bar-activated-state-toggled"
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsMetricsStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js (182054 => 182055)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js 2015-03-27 07:26:27 UTC (rev 182054)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js 2015-03-27 07:26:35 UTC (rev 182055)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,29 +23,24 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.MetricsStyleDetailsPanel = function()
</del><ins>+WebInspector.MetricsStyleDetailsPanel = class MetricsStyleDetailsPanel extends WebInspector.StyleDetailsPanel
</ins><span class="cx"> {
</span><del>- WebInspector.StyleDetailsPanel.call(this, WebInspector.MetricsStyleDetailsPanel.StyleClassName, "metrics", WebInspector.UIString("Metrics"));
</del><ins>+ constructor()
+ {
+ super("metrics", "metrics", WebInspector.UIString("Metrics"));
</ins><span class="cx">
</span><del>- this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
</del><ins>+ this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
</ins><span class="cx">
</span><del>- var boxModelGroup = new WebInspector.DetailsSectionGroup([this._boxModelDiagramRow]);
- var boxModelSection = new WebInspector.DetailsSection("style-box-model", WebInspector.UIString("Box Model"), [boxModelGroup]);
</del><ins>+ var boxModelGroup = new WebInspector.DetailsSectionGroup([this._boxModelDiagramRow]);
+ var boxModelSection = new WebInspector.DetailsSection("style-box-model", WebInspector.UIString("Box Model"), [boxModelGroup]);
</ins><span class="cx">
</span><del>- this.element.appendChild(boxModelSection.element);
-};
</del><ins>+ this.element.appendChild(boxModelSection.element);
+ }
</ins><span class="cx">
</span><del>-WebInspector.MetricsStyleDetailsPanel.StyleClassName = "metrics";
-
-WebInspector.MetricsStyleDetailsPanel.prototype = {
- constructor: WebInspector.MetricsStyleDetailsPanel,
-
</del><span class="cx"> // Public
</span><span class="cx">
</span><del>- refresh: function()
</del><ins>+ refresh()
</ins><span class="cx"> {
</span><span class="cx"> this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
</span><span class="cx"> }
</span><span class="cx"> };
</span><del>-
-WebInspector.MetricsStyleDetailsPanel.prototype.__proto__ = WebInspector.StyleDetailsPanel.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectPreviewViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js (182054 => 182055)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js 2015-03-27 07:26:27 UTC (rev 182054)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js 2015-03-27 07:26:35 UTC (rev 182055)
</span><span class="lines">@@ -23,80 +23,72 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.ObjectPreviewView = function(preview, mode)
</del><ins>+WebInspector.ObjectPreviewView = class ObjectPreviewView extends WebInspector.Object
</ins><span class="cx"> {
</span><del>- // FIXME: Convert this to a WebInspector.Object subclass, and call super().
- // WebInspector.Object.call(this);
</del><ins>+ constructor(preview, mode)
+ {
+ console.assert(preview instanceof WebInspector.ObjectPreview);
</ins><span class="cx">
</span><del>- console.assert(preview instanceof WebInspector.ObjectPreview);
</del><ins>+ super();
</ins><span class="cx">
</span><del>- this._preview = preview;
- this._mode = mode || WebInspector.ObjectPreviewView.Mode.Full;
</del><ins>+ this._preview = preview;
+ this._mode = mode || WebInspector.ObjectPreviewView.Mode.Full;
</ins><span class="cx">
</span><del>- this._element = document.createElement("span");
- this._element.className = "object-preview";
</del><ins>+ this._element = document.createElement("span");
+ this._element.className = "object-preview";
</ins><span class="cx">
</span><del>- this._previewElement = this._element.appendChild(document.createElement("span"));
- this._previewElement.className = "preview";
- this._lossless = this._appendPreview(this._previewElement, this._preview);
</del><ins>+ this._previewElement = this._element.appendChild(document.createElement("span"));
+ this._previewElement.className = "preview";
+ this._lossless = this._appendPreview(this._previewElement, this._preview);
</ins><span class="cx">
</span><del>- this._titleElement = this._element.appendChild(document.createElement("span"));
- this._titleElement.className = "title";
- this._titleElement.hidden = true;
- this._initTitleElement();
</del><ins>+ this._titleElement = this._element.appendChild(document.createElement("span"));
+ this._titleElement.className = "title";
+ this._titleElement.hidden = true;
+ this._initTitleElement();
</ins><span class="cx">
</span><del>- if (this._preview.hasSize()) {
- var sizeElement = this._element.appendChild(document.createElement("span"));
- sizeElement.className = "size";
- sizeElement.textContent = " (" + this._preview.size + ")";
</del><ins>+ if (this._preview.hasSize()) {
+ var sizeElement = this._element.appendChild(document.createElement("span"));
+ sizeElement.className = "size";
+ sizeElement.textContent = " (" + this._preview.size + ")";
+ }
+
+ if (this._lossless)
+ this._element.classList.add("lossless");
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- if (this._lossless)
- this._element.classList.add("lossless");
-};
-
-WebInspector.ObjectPreviewView.Mode = {
- Brief: Symbol("object-preview-brief"),
- Full: Symbol("object-preview-full"),
-};
-
-WebInspector.ObjectPreviewView.prototype = {
- constructor: WebInspector.ObjectPreviewView,
- __proto__: WebInspector.Object.prototype,
-
</del><span class="cx"> // Public
</span><span class="cx">
</span><span class="cx"> get preview()
</span><span class="cx"> {
</span><span class="cx"> return this._preview;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> get element()
</span><span class="cx"> {
</span><span class="cx"> return this._element;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> get mode()
</span><span class="cx"> {
</span><span class="cx"> return this._mode;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> get lossless()
</span><span class="cx"> {
</span><span class="cx"> return this._lossless;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> showTitle()
</span><span class="cx"> {
</span><span class="cx"> this._titleElement.hidden = false;
</span><span class="cx"> this._previewElement.hidden = true;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> showPreview()
</span><span class="cx"> {
</span><span class="cx"> this._titleElement.hidden = true;
</span><span class="cx"> this._previewElement.hidden = false;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><span class="lines">@@ -107,12 +99,12 @@
</span><span class="cx"> this._titleElement.appendChild(WebInspector.FormattedValue.createElementForObjectPreview(this._preview));
</span><span class="cx"> else
</span><span class="cx"> this._titleElement.textContent = this._preview.description || "";
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> _numberOfPropertiesToShowInMode()
</span><span class="cx"> {
</span><span class="cx"> return this._mode === WebInspector.ObjectPreviewView.Mode.Brief ? 3 : Infinity;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> _appendPreview(element, preview)
</span><span class="cx"> {
</span><span class="lines">@@ -139,7 +131,7 @@
</span><span class="cx"> return this._appendPropertyPreviews(bodyElement, preview);
</span><span class="cx"> }
</span><span class="cx"> return this._appendValuePreview(bodyElement, preview);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> _appendEntryPreviews(element, preview)
</span><span class="cx"> {
</span><span class="lines">@@ -172,7 +164,7 @@
</span><span class="cx"> element.appendChild(document.createTextNode(isIterator ? "]" : "}"));
</span><span class="cx">
</span><span class="cx"> return lossless;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> _appendPropertyPreviews(element, preview)
</span><span class="cx"> {
</span><span class="lines">@@ -224,7 +216,7 @@
</span><span class="cx"> element.appendChild(document.createTextNode(isArray ? "]" : "}"));
</span><span class="cx">
</span><span class="cx"> return preview.lossless;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> _appendValuePreview(element, preview)
</span><span class="cx"> {
</span><span class="lines">@@ -232,3 +224,8 @@
</span><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="cx"> };
</span><ins>+
+WebInspector.ObjectPreviewView.Mode = {
+ Brief: Symbol("object-preview-brief"),
+ Full: Symbol("object-preview-full"),
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js (182054 => 182055)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js 2015-03-27 07:26:27 UTC (rev 182054)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js 2015-03-27 07:26:35 UTC (rev 182055)
</span><span class="lines">@@ -23,157 +23,150 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.ObjectTreeView = function(object, mode, propertyPath, forceExpanding)
</del><ins>+WebInspector.ObjectTreeView = class ObjectTreeView extends WebInspector.Object
</ins><span class="cx"> {
</span><del>- // FIXME: Convert this to a WebInspector.Object subclass, and call super().
- // WebInspector.Object.call(this);
</del><ins>+ constructor(object, mode, propertyPath, forceExpanding)
+ {
+ super();
</ins><span class="cx">
</span><del>- console.assert(object instanceof WebInspector.RemoteObject);
- console.assert(!propertyPath || propertyPath instanceof WebInspector.PropertyPath);
</del><ins>+ console.assert(object instanceof WebInspector.RemoteObject);
+ console.assert(!propertyPath || propertyPath instanceof WebInspector.PropertyPath);
</ins><span class="cx">
</span><del>- this._object = object;
- this._mode = mode || WebInspector.ObjectTreeView.defaultModeForObject(object);
- this._propertyPath = propertyPath || new WebInspector.PropertyPath(this._object, "this");
- this._expanded = false;
- this._hasLosslessPreview = false;
</del><ins>+ this._object = object;
+ this._mode = mode || WebInspector.ObjectTreeView.defaultModeForObject(object);
+ this._propertyPath = propertyPath || new WebInspector.PropertyPath(this._object, "this");
+ this._expanded = false;
+ this._hasLosslessPreview = false;
</ins><span class="cx">
</span><del>- // If ObjectTree is used outside of the console, we do not know when to release
- // WeakMap entries. Currently collapse would work. For the console, we can just
- // listen for console clear events. Currently all ObjectTrees are in the console.
- this._inConsole = true;
</del><ins>+ // If ObjectTree is used outside of the console, we do not know when to release
+ // WeakMap entries. Currently collapse would work. For the console, we can just
+ // listen for console clear events. Currently all ObjectTrees are in the console.
+ this._inConsole = true;
</ins><span class="cx">
</span><del>- // Always force expanding for classes.
- if (this._object.isClass())
- forceExpanding = true;
</del><ins>+ // Always force expanding for classes.
+ if (this._object.isClass())
+ forceExpanding = true;
</ins><span class="cx">
</span><del>- this._element = document.createElement("div");
- this._element.className = "object-tree";
</del><ins>+ this._element = document.createElement("div");
+ this._element.className = "object-tree";
</ins><span class="cx">
</span><del>- if (this._object.preview) {
- this._previewView = new WebInspector.ObjectPreviewView(this._object.preview);
- this._previewView.element.addEventListener("click", this._handlePreviewOrTitleElementClick.bind(this));
- this._element.appendChild(this._previewView.element);
</del><ins>+ if (this._object.preview) {
+ this._previewView = new WebInspector.ObjectPreviewView(this._object.preview);
+ this._previewView.element.addEventListener("click", this._handlePreviewOrTitleElementClick.bind(this));
+ this._element.appendChild(this._previewView.element);
</ins><span class="cx">
</span><del>- if (this._previewView.lossless && !this._propertyPath.parent && !forceExpanding) {
- this._hasLosslessPreview = true;
- this.element.classList.add("lossless-preview");
</del><ins>+ if (this._previewView.lossless && !this._propertyPath.parent && !forceExpanding) {
+ this._hasLosslessPreview = true;
+ this.element.classList.add("lossless-preview");
+ }
+ } else {
+ this._titleElement = document.createElement("span");
+ this._titleElement.className = "title";
+ this._titleElement.appendChild(WebInspector.FormattedValue.createElementForRemoteObject(this._object));
+ this._titleElement.addEventListener("click", this._handlePreviewOrTitleElementClick.bind(this));
+ this._element.appendChild(this._titleElement);
</ins><span class="cx"> }
</span><del>- } else {
- this._titleElement = document.createElement("span");
- this._titleElement.className = "title";
- this._titleElement.appendChild(WebInspector.FormattedValue.createElementForRemoteObject(this._object));
- this._titleElement.addEventListener("click", this._handlePreviewOrTitleElementClick.bind(this));
- this._element.appendChild(this._titleElement);
- }
</del><span class="cx">
</span><del>- this._outlineElement = document.createElement("ol");
- this._outlineElement.className = "object-tree-outline";
- this._outline = new WebInspector.TreeOutline(this._outlineElement);
- this._element.appendChild(this._outlineElement);
</del><ins>+ this._outlineElement = document.createElement("ol");
+ this._outlineElement.className = "object-tree-outline";
+ this._outline = new WebInspector.TreeOutline(this._outlineElement);
+ this._element.appendChild(this._outlineElement);
</ins><span class="cx">
</span><del>- // FIXME: Support editable ObjectTrees.
-};
</del><ins>+ // FIXME: Support editable ObjectTrees.
+ }
</ins><span class="cx">
</span><del>-WebInspector.ObjectTreeView.defaultModeForObject = function(object)
-{
- if (object.subtype === "class")
- return WebInspector.ObjectTreeView.Mode.ClassAPI;
</del><ins>+ // Static
</ins><span class="cx">
</span><del>- return WebInspector.ObjectTreeView.Mode.Properties;
-}
</del><ins>+ static defaultModeForObject(object)
+ {
+ if (object.subtype === "class")
+ return WebInspector.ObjectTreeView.Mode.ClassAPI;
</ins><span class="cx">
</span><del>-WebInspector.ObjectTreeView.emptyMessageElement = function(message)
-{
- var emptyMessageElement = document.createElement("div");
- emptyMessageElement.className = "empty-message";
- emptyMessageElement.textContent = message;
- return emptyMessageElement;
-};
</del><ins>+ return WebInspector.ObjectTreeView.Mode.Properties;
+ }
</ins><span class="cx">
</span><del>-WebInspector.ObjectTreeView.Mode = {
- Properties: Symbol("object-tree-properties"), // Properties
- PrototypeAPI: Symbol("object-tree-prototype-api"), // API view on a live object instance, so getters can be invoked.
- ClassAPI: Symbol("object-tree-class-api"), // API view without an object instance, can not invoke getters.
-};
</del><ins>+ static createEmptyMessageElement(message)
+ {
+ var emptyMessageElement = document.createElement("div");
+ emptyMessageElement.className = "empty-message";
+ emptyMessageElement.textContent = message;
+ return emptyMessageElement;
+ };
</ins><span class="cx">
</span><del>-WebInspector.ObjectTreeView.ComparePropertyDescriptors = function(propertyA, propertyB)
-{
- var a = propertyA.name;
- var b = propertyB.name;
</del><ins>+ static comparePropertyDescriptors(propertyA, propertyB)
+ {
+ var a = propertyA.name;
+ var b = propertyB.name;
</ins><span class="cx">
</span><del>- // Put __proto__ at the bottom.
- if (a === "__proto__")
- return 1;
- if (b === "__proto__")
- return -1;
</del><ins>+ // Put __proto__ at the bottom.
+ if (a === "__proto__")
+ return 1;
+ if (b === "__proto__")
+ return -1;
</ins><span class="cx">
</span><del>- // Put internal properties at the top.
- if (a.isInternalProperty && !b.isInternalProperty)
- return -1;
- if (b.isInternalProperty && !a.isInternalProperty)
- return 1;
-
- // if used elsewhere make sure to
- // - convert a and b to strings (not needed here, properties are all strings)
- // - check if a == b (not needed here, no two properties can be the same)
-
- var diff = 0;
- var chunk = /^\d+|^\D+/;
- var chunka, chunkb, anum, bnum;
- while (diff === 0) {
- if (!a && b)
</del><ins>+ // Put internal properties at the top.
+ if (a.isInternalProperty && !b.isInternalProperty)
</ins><span class="cx"> return -1;
</span><del>- if (!b && a)
</del><ins>+ if (b.isInternalProperty && !a.isInternalProperty)
</ins><span class="cx"> return 1;
</span><del>- chunka = a.match(chunk)[0];
- chunkb = b.match(chunk)[0];
- anum = !isNaN(chunka);
- bnum = !isNaN(chunkb);
- if (anum && !bnum)
- return -1;
- if (bnum && !anum)
- return 1;
- if (anum && bnum) {
- diff = chunka - chunkb;
- if (diff === 0 && chunka.length !== chunkb.length) {
- if (!+chunka && !+chunkb) // chunks are strings of all 0s (special case)
- return chunka.length - chunkb.length;
- else
- return chunkb.length - chunka.length;
- }
- } else if (chunka !== chunkb)
- return (chunka < chunkb) ? -1 : 1;
- a = a.substring(chunka.length);
- b = b.substring(chunkb.length);
- }
- return diff;
-};
</del><span class="cx">
</span><del>-WebInspector.ObjectTreeView.prototype = {
- constructor: WebInspector.ObjectTreeView,
- __proto__: WebInspector.Object.prototype,
</del><ins>+ // if used elsewhere make sure to
+ // - convert a and b to strings (not needed here, properties are all strings)
+ // - check if a == b (not needed here, no two properties can be the same)
</ins><span class="cx">
</span><ins>+ var diff = 0;
+ var chunk = /^\d+|^\D+/;
+ var chunka, chunkb, anum, bnum;
+ while (diff === 0) {
+ if (!a && b)
+ return -1;
+ if (!b && a)
+ return 1;
+ chunka = a.match(chunk)[0];
+ chunkb = b.match(chunk)[0];
+ anum = !isNaN(chunka);
+ bnum = !isNaN(chunkb);
+ if (anum && !bnum)
+ return -1;
+ if (bnum && !anum)
+ return 1;
+ if (anum && bnum) {
+ diff = chunka - chunkb;
+ if (diff === 0 && chunka.length !== chunkb.length) {
+ if (!+chunka && !+chunkb) // chunks are strings of all 0s (special case)
+ return chunka.length - chunkb.length;
+ else
+ return chunkb.length - chunka.length;
+ }
+ } else if (chunka !== chunkb)
+ return (chunka < chunkb) ? -1 : 1;
+ a = a.substring(chunka.length);
+ b = b.substring(chunkb.length);
+ }
+ return diff;
+ };
+
</ins><span class="cx"> // Public
</span><span class="cx">
</span><span class="cx"> get object()
</span><span class="cx"> {
</span><span class="cx"> return this._object;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> get element()
</span><span class="cx"> {
</span><span class="cx"> return this._element;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> get treeOutline()
</span><span class="cx"> {
</span><span class="cx"> return this._outline;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> get expanded()
</span><span class="cx"> {
</span><span class="cx"> return this._expanded;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> expand()
</span><span class="cx"> {
</span><span class="lines">@@ -189,7 +182,7 @@
</span><span class="cx"> this._trackWeakEntries();
</span><span class="cx">
</span><span class="cx"> this.update();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> collapse()
</span><span class="cx"> {
</span><span class="lines">@@ -203,14 +196,14 @@
</span><span class="cx"> this._previewView.showPreview();
</span><span class="cx">
</span><span class="cx"> this._untrackWeakEntries();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> showOnlyProperties()
</span><span class="cx"> {
</span><span class="cx"> this._inConsole = false;
</span><span class="cx">
</span><span class="cx"> this._element.classList.add("properties-only");
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> appendTitleSuffix(suffixElement)
</span><span class="cx"> {
</span><span class="lines">@@ -218,7 +211,7 @@
</span><span class="cx"> this._previewView.element.appendChild(suffixElement);
</span><span class="cx"> else
</span><span class="cx"> this._titleElement.appendChild(suffixElement);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> appendExtraPropertyDescriptor(propertyDescriptor)
</span><span class="cx"> {
</span><span class="lines">@@ -226,7 +219,7 @@
</span><span class="cx"> this._extraProperties = [];
</span><span class="cx">
</span><span class="cx"> this._extraProperties.push(propertyDescriptor);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> // Protected
</span><span class="cx">
</span><span class="lines">@@ -238,7 +231,7 @@
</span><span class="cx"> this._object.classPrototype.getDisplayablePropertyDescriptors(this._updateChildren.bind(this, this._updateProperties));
</span><span class="cx"> else
</span><span class="cx"> this._object.getDisplayablePropertyDescriptors(this._updateChildren.bind(this, this._updateProperties));
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><span class="lines">@@ -247,13 +240,13 @@
</span><span class="cx"> this._outline.removeChildren();
</span><span class="cx">
</span><span class="cx"> if (!list) {
</span><del>- var errorMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString("Could not fetch properties. Object may no longer exist."));
</del><ins>+ var errorMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("Could not fetch properties. Object may no longer exist."));
</ins><span class="cx"> this._outline.appendChild(new WebInspector.TreeElement(errorMessageElement, null, false));
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> handler.call(this, list, this._propertyPath);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> _updateEntries(entries, propertyPath)
</span><span class="cx"> {
</span><span class="lines">@@ -266,7 +259,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (!this._outline.children.length) {
</span><del>- var emptyMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString("No Entries."));
</del><ins>+ var emptyMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("No Entries."));
</ins><span class="cx"> this._outline.appendChild(new WebInspector.TreeElement(emptyMessageElement, null, false));
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -275,14 +268,14 @@
</span><span class="cx"> if (propertyDescriptor)
</span><span class="cx"> this._outline.appendChild(new WebInspector.ObjectTreePropertyTreeElement(propertyDescriptor, propertyPath, this._mode));
</span><span class="cx"> }.bind(this));
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> _updateProperties(properties, propertyPath)
</span><span class="cx"> {
</span><span class="cx"> if (this._extraProperties)
</span><span class="cx"> properties = properties.concat(this._extraProperties);
</span><span class="cx">
</span><del>- properties.sort(WebInspector.ObjectTreeView.ComparePropertyDescriptors);
</del><ins>+ properties.sort(WebInspector.ObjectTreeView.comparePropertyDescriptors);
</ins><span class="cx">
</span><span class="cx"> var isArray = this._object.isArray();
</span><span class="cx"> var isPropertyMode = this._mode === WebInspector.ObjectTreeView.Mode.Properties;
</span><span class="lines">@@ -298,10 +291,10 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (!this._outline.children.length) {
</span><del>- var emptyMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString("No Properties."));
</del><ins>+ var emptyMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("No Properties."));
</ins><span class="cx"> this._outline.appendChild(new WebInspector.TreeElement(emptyMessageElement, null, false));
</span><span class="cx"> }
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> _handlePreviewOrTitleElementClick(event)
</span><span class="cx"> {
</span><span class="lines">@@ -314,7 +307,7 @@
</span><span class="cx"> this.collapse();
</span><span class="cx">
</span><span class="cx"> event.stopPropagation();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> _trackWeakEntries()
</span><span class="cx"> {
</span><span class="lines">@@ -331,7 +324,7 @@
</span><span class="cx"> WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.ActiveLogCleared, this._untrackWeakEntries, this);
</span><span class="cx"> WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.SessionStarted, this._untrackWeakEntries, this);
</span><span class="cx"> }
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> _untrackWeakEntries()
</span><span class="cx"> {
</span><span class="lines">@@ -354,5 +347,11 @@
</span><span class="cx"> // FIXME: This only tries to release weak entries if this object was a WeakMap.
</span><span class="cx"> // If there was a WeakMap expanded in a sub-object, we will never release those values.
</span><span class="cx"> // Should we attempt walking the entire tree and release weak collections?
</span><del>- },
</del><ins>+ }
</ins><span class="cx"> };
</span><ins>+
+WebInspector.ObjectTreeView.Mode = {
+ Properties: Symbol("object-tree-properties"), // Properties
+ PrototypeAPI: Symbol("object-tree-prototype-api"), // API view on a live object instance, so getters can be invoked.
+ ClassAPI: Symbol("object-tree-class-api"), // API view without an object instance, can not invoke getters.
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsQuickConsolejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js (182054 => 182055)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js 2015-03-27 07:26:27 UTC (rev 182054)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js 2015-03-27 07:26:35 UTC (rev 182055)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,105 +23,87 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.QuickConsole = function(element)
</del><ins>+WebInspector.QuickConsole = class QuickConsole extends WebInspector.Object
</ins><span class="cx"> {
</span><del>- // FIXME: Convert this to a WebInspector.Object subclass, and call super().
- // WebInspector.Object.call(this);
</del><ins>+ constructor(element)
+ {
+ super();
</ins><span class="cx">
</span><del>- this._toggleOrFocusKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this._toggleOrFocus.bind(this));
</del><ins>+ this._toggleOrFocusKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this._toggleOrFocus.bind(this));
</ins><span class="cx">
</span><del>- var mainFrameExecutionContext = new WebInspector.ExecutionContext(WebInspector.QuickConsole.MainFrameContextExecutionIdentifier, WebInspector.UIString("Main Frame"), true, null);
- this._mainFrameExecutionContextPathComponent = this._createExecutionContextPathComponent(mainFrameExecutionContext.name, mainFrameExecutionContext.identifier);
- this._selectedExecutionContextPathComponent = this._mainFrameExecutionContextPathComponent;
</del><ins>+ var mainFrameExecutionContext = new WebInspector.ExecutionContext(WebInspector.QuickConsole.MainFrameContextExecutionIdentifier, WebInspector.UIString("Main Frame"), true, null);
+ this._mainFrameExecutionContextPathComponent = this._createExecutionContextPathComponent(mainFrameExecutionContext.name, mainFrameExecutionContext.identifier);
+ this._selectedExecutionContextPathComponent = this._mainFrameExecutionContextPathComponent;
</ins><span class="cx">
</span><del>- this._otherExecutionContextPathComponents = [];
- this._frameIdentifierToExecutionContextPathComponentMap = {};
</del><ins>+ this._otherExecutionContextPathComponents = [];
+ this._frameIdentifierToExecutionContextPathComponentMap = {};
</ins><span class="cx">
</span><del>- this._element = element || document.createElement("div");
- this._element.classList.add(WebInspector.QuickConsole.StyleClassName);
</del><ins>+ this._element = element || document.createElement("div");
+ this._element.classList.add("quick-console");
</ins><span class="cx">
</span><del>- this.prompt = new WebInspector.ConsolePrompt(null, "text/javascript");
- this.prompt.element.classList.add(WebInspector.QuickConsole.TextPromptStyleClassName);
- this._element.appendChild(this.prompt.element);
</del><ins>+ this.prompt = new WebInspector.ConsolePrompt(null, "text/javascript");
+ this.prompt.element.classList.add(WebInspector.QuickConsole.TextPromptStyleClassName);
+ this._element.appendChild(this.prompt.element);
</ins><span class="cx">
</span><del>- // FIXME: CodeMirror 4 has a default "Esc" key handler that always prevents default.
- // Our keyboard shortcut above will respect the default prevented and ignore the event
- // and not toggle the console. Install our own Escape key handler that will trigger
- // when the ConsolePrompt is empty, to restore toggling behavior. A better solution
- // would be for CodeMirror's event handler to pass if it doesn't do anything.
- this.prompt.escapeKeyHandlerWhenEmpty = function() { WebInspector.toggleSplitConsole(); };
</del><ins>+ // FIXME: CodeMirror 4 has a default "Esc" key handler that always prevents default.
+ // Our keyboard shortcut above will respect the default prevented and ignore the event
+ // and not toggle the console. Install our own Escape key handler that will trigger
+ // when the ConsolePrompt is empty, to restore toggling behavior. A better solution
+ // would be for CodeMirror's event handler to pass if it doesn't do anything.
+ this.prompt.escapeKeyHandlerWhenEmpty = function() { WebInspector.toggleSplitConsole(); };
</ins><span class="cx">
</span><del>- this.prompt.shown();
</del><ins>+ this.prompt.shown();
</ins><span class="cx">
</span><del>- this._navigationBar = new WebInspector.QuickConsoleNavigationBar;
- this._element.appendChild(this._navigationBar.element);
</del><ins>+ this._navigationBar = new WebInspector.QuickConsoleNavigationBar;
+ this._element.appendChild(this._navigationBar.element);
</ins><span class="cx">
</span><del>- this._executionContextSelectorItem = new WebInspector.HierarchicalPathNavigationItem;
- this._executionContextSelectorItem.showSelectorArrows = true;
- this._navigationBar.addNavigationItem(this._executionContextSelectorItem);
</del><ins>+ this._executionContextSelectorItem = new WebInspector.HierarchicalPathNavigationItem;
+ this._executionContextSelectorItem.showSelectorArrows = true;
+ this._navigationBar.addNavigationItem(this._executionContextSelectorItem);
</ins><span class="cx">
</span><del>- this._executionContextSelectorDivider = new WebInspector.DividerNavigationItem;
- this._navigationBar.addNavigationItem(this._executionContextSelectorDivider);
</del><ins>+ this._executionContextSelectorDivider = new WebInspector.DividerNavigationItem;
+ this._navigationBar.addNavigationItem(this._executionContextSelectorDivider);
</ins><span class="cx">
</span><del>- this._rebuildExecutionContextPathComponents();
</del><ins>+ this._rebuildExecutionContextPathComponents();
</ins><span class="cx">
</span><del>- // COMPATIBILITY (iOS 6): Execution contexts did not exist, evaluation worked with frame ids.
- if (WebInspector.ExecutionContext.supported()) {
- WebInspector.Frame.addEventListener(WebInspector.Frame.Event.PageExecutionContextChanged, this._framePageExecutionContextsChanged, this);
- WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ExecutionContextsCleared, this._frameExecutionContextsCleared, this);
- } else {
- WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasAdded, this._frameAdded, this);
- WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasRemoved, this._frameRemoved, this);
- WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._frameMainResourceChanged, this);
</del><ins>+ // COMPATIBILITY (iOS 6): Execution contexts did not exist, evaluation worked with frame ids.
+ if (WebInspector.ExecutionContext.supported()) {
+ WebInspector.Frame.addEventListener(WebInspector.Frame.Event.PageExecutionContextChanged, this._framePageExecutionContextsChanged, this);
+ WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ExecutionContextsCleared, this._frameExecutionContextsCleared, this);
+ } else {
+ WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasAdded, this._frameAdded, this);
+ WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasRemoved, this._frameRemoved, this);
+ WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._frameMainResourceChanged, this);
+ }
+
+ WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._debuggerActiveCallFrameDidChange, this);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._debuggerActiveCallFrameDidChange, this);
-};
-
-WebInspector.QuickConsole.StyleClassName = "quick-console";
-WebInspector.QuickConsole.ShowingLogClassName = "showing-log";
-WebInspector.QuickConsole.NavigationBarContainerStyleClassName = "navigation-bar-container";
-WebInspector.QuickConsole.NavigationBarSpacerStyleClassName = "navigation-bar-spacer";
-WebInspector.QuickConsole.TextPromptStyleClassName = "text-prompt";
-
-WebInspector.QuickConsole.ToolbarSingleLineHeight = 21;
-WebInspector.QuickConsole.ToolbarPromptPadding = 4;
-WebInspector.QuickConsole.ToolbarTopBorder = 1;
-
-WebInspector.QuickConsole.MainFrameContextExecutionIdentifier = undefined;
-
-WebInspector.QuickConsole.Event = {
- DidResize: "quick-console-did-resize"
-};
-
-WebInspector.QuickConsole.prototype = {
- constructor: WebInspector.QuickConsole,
-
</del><span class="cx"> // Public
</span><span class="cx">
</span><span class="cx"> get element()
</span><span class="cx"> {
</span><span class="cx"> return this._element;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> get navigationBar()
</span><span class="cx"> {
</span><span class="cx"> return this._navigationBar;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> get executionContextIdentifier()
</span><span class="cx"> {
</span><span class="cx"> return this._selectedExecutionContextPathComponent._executionContextIdentifier;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- updateLayout: function()
</del><ins>+ updateLayout()
</ins><span class="cx"> {
</span><span class="cx"> // A hard maximum size of 33% of the window.
</span><del>- const maximumAllowedHeight = Math.round(window.innerHeight * 0.33);
</del><ins>+ var maximumAllowedHeight = Math.round(window.innerHeight * 0.33);
</ins><span class="cx"> this.prompt.element.style.maxHeight = maximumAllowedHeight + "px";
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- consoleLogVisibilityChanged: function(visible)
</del><ins>+ consoleLogVisibilityChanged(visible)
</ins><span class="cx"> {
</span><span class="cx"> if (visible)
</span><span class="cx"> this.element.classList.add(WebInspector.QuickConsole.ShowingLogClassName);
</span><span class="lines">@@ -129,11 +111,11 @@
</span><span class="cx"> this.element.classList.remove(WebInspector.QuickConsole.ShowingLogClassName);
</span><span class="cx">
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.QuickConsole.Event.DidResize);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><del>- _executionContextPathComponentsToDisplay: function()
</del><ins>+ _executionContextPathComponentsToDisplay()
</ins><span class="cx"> {
</span><span class="cx"> // If we are in the debugger the console will use the active call frame, don't show the selector.
</span><span class="cx"> if (WebInspector.debuggerManager.activeCallFrame)
</span><span class="lines">@@ -144,9 +126,9 @@
</span><span class="cx"> return [];
</span><span class="cx">
</span><span class="cx"> return [this._selectedExecutionContextPathComponent];
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _rebuildExecutionContextPathComponents: function()
</del><ins>+ _rebuildExecutionContextPathComponents()
</ins><span class="cx"> {
</span><span class="cx"> var components = this._executionContextPathComponentsToDisplay();
</span><span class="cx"> var isEmpty = !components.length;
</span><span class="lines">@@ -155,9 +137,9 @@
</span><span class="cx">
</span><span class="cx"> this._executionContextSelectorItem.hidden = isEmpty;
</span><span class="cx"> this._executionContextSelectorDivider.hidden = isEmpty;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _framePageExecutionContextsChanged: function(event)
</del><ins>+ _framePageExecutionContextsChanged(event)
</ins><span class="cx"> {
</span><span class="cx"> var frame = event.target;
</span><span class="cx">
</span><span class="lines">@@ -170,9 +152,9 @@
</span><span class="cx"> this._selectedExecutionContextPathComponent = newExecutionContextPathComponent;
</span><span class="cx"> this._rebuildExecutionContextPathComponents();
</span><span class="cx"> }
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _frameExecutionContextsCleared: function(event)
</del><ins>+ _frameExecutionContextsCleared(event)
</ins><span class="cx"> {
</span><span class="cx"> var frame = event.target;
</span><span class="cx">
</span><span class="lines">@@ -187,27 +169,27 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._removeExecutionContextPathComponentForFrame(frame);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _frameAdded: function(event)
</del><ins>+ _frameAdded(event)
</ins><span class="cx"> {
</span><span class="cx"> var frame = event.data.frame;
</span><span class="cx"> this._insertExecutionContextPathComponentForFrame(frame);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _frameRemoved: function(event)
</del><ins>+ _frameRemoved(event)
</ins><span class="cx"> {
</span><span class="cx"> var frame = event.data.frame;
</span><span class="cx"> this._removeExecutionContextPathComponentForFrame(frame);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _frameMainResourceChanged: function(event)
</del><ins>+ _frameMainResourceChanged(event)
</ins><span class="cx"> {
</span><span class="cx"> var frame = event.target;
</span><span class="cx"> this._updateExecutionContextPathComponentForFrame(frame);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _createExecutionContextPathComponent: function(name, identifier)
</del><ins>+ _createExecutionContextPathComponent(name, identifier)
</ins><span class="cx"> {
</span><span class="cx"> var pathComponent = new WebInspector.HierarchicalPathComponent(name, "execution-context", identifier, true, true);
</span><span class="cx"> pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
</span><span class="lines">@@ -215,9 +197,9 @@
</span><span class="cx"> pathComponent.truncatedDisplayNameLength = 50;
</span><span class="cx"> pathComponent._executionContextIdentifier = identifier;
</span><span class="cx"> return pathComponent;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _createExecutionContextPathComponentFromFrame: function(frame)
</del><ins>+ _createExecutionContextPathComponentFromFrame(frame)
</ins><span class="cx"> {
</span><span class="cx"> var name = frame.name ? frame.name + " \u2014 " + frame.mainResource.displayName : frame.mainResource.displayName;
</span><span class="cx"> var identifier = WebInspector.ExecutionContext.supported() ? frame.pageExecutionContext.id : frame.id;
</span><span class="lines">@@ -226,9 +208,9 @@
</span><span class="cx"> pathComponent._frame = frame;
</span><span class="cx">
</span><span class="cx"> return pathComponent;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _compareExecutionContextPathComponents: function(a, b)
</del><ins>+ _compareExecutionContextPathComponents(a, b)
</ins><span class="cx"> {
</span><span class="cx"> // "Main Frame" always on top.
</span><span class="cx"> if (!a._frame)
</span><span class="lines">@@ -243,9 +225,9 @@
</span><span class="cx"> return 1;
</span><span class="cx">
</span><span class="cx"> return a.displayName.localeCompare(b.displayName);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _insertExecutionContextPathComponentForFrame: function(frame, skipRebuild)
</del><ins>+ _insertExecutionContextPathComponentForFrame(frame, skipRebuild)
</ins><span class="cx"> {
</span><span class="cx"> if (frame.isMainFrame())
</span><span class="cx"> return this._mainFrameExecutionContextPathComponent;
</span><span class="lines">@@ -276,9 +258,9 @@
</span><span class="cx"> this._rebuildExecutionContextPathComponents();
</span><span class="cx">
</span><span class="cx"> return executionContextPathComponent;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _removeExecutionContextPathComponentForFrame: function(frame, skipRebuild)
</del><ins>+ _removeExecutionContextPathComponentForFrame(frame, skipRebuild)
</ins><span class="cx"> {
</span><span class="cx"> if (frame.isMainFrame())
</span><span class="cx"> return;
</span><span class="lines">@@ -306,9 +288,9 @@
</span><span class="cx">
</span><span class="cx"> if (!skipRebuild)
</span><span class="cx"> this._rebuildExecutionContextPathComponents();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _updateExecutionContextPathComponentForFrame: function(frame)
</del><ins>+ _updateExecutionContextPathComponentForFrame(frame)
</ins><span class="cx"> {
</span><span class="cx"> if (frame.isMainFrame())
</span><span class="cx"> return;
</span><span class="lines">@@ -326,9 +308,9 @@
</span><span class="cx"> this._selectedExecutionContextPathComponent = newExecutionContextPathComponent;
</span><span class="cx">
</span><span class="cx"> this._rebuildExecutionContextPathComponents();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _pathComponentSelected: function(event)
</del><ins>+ _pathComponentSelected(event)
</ins><span class="cx"> {
</span><span class="cx"> if (event.data.pathComponent === this._selectedExecutionContextPathComponent)
</span><span class="cx"> return;
</span><span class="lines">@@ -336,19 +318,19 @@
</span><span class="cx"> this._selectedExecutionContextPathComponent = event.data.pathComponent;
</span><span class="cx">
</span><span class="cx"> this._rebuildExecutionContextPathComponents();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _pathComponentClicked: function(event)
</del><ins>+ _pathComponentClicked(event)
</ins><span class="cx"> {
</span><span class="cx"> this.prompt.focus();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _debuggerActiveCallFrameDidChange: function(event)
</del><ins>+ _debuggerActiveCallFrameDidChange(event)
</ins><span class="cx"> {
</span><span class="cx"> this._rebuildExecutionContextPathComponents();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _toggleOrFocus: function(event)
</del><ins>+ _toggleOrFocus(event)
</ins><span class="cx"> {
</span><span class="cx"> if (this.prompt.focused)
</span><span class="cx"> WebInspector.toggleSplitConsole();
</span><span class="lines">@@ -357,4 +339,17 @@
</span><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span><del>-WebInspector.QuickConsole.prototype.__proto__ = WebInspector.Object.prototype;
</del><ins>+WebInspector.QuickConsole.ShowingLogClassName = "showing-log";
+WebInspector.QuickConsole.NavigationBarContainerStyleClassName = "navigation-bar-container";
+WebInspector.QuickConsole.NavigationBarSpacerStyleClassName = "navigation-bar-spacer";
+WebInspector.QuickConsole.TextPromptStyleClassName = "text-prompt";
+
+WebInspector.QuickConsole.ToolbarSingleLineHeight = 21;
+WebInspector.QuickConsole.ToolbarPromptPadding = 4;
+WebInspector.QuickConsole.ToolbarTopBorder = 1;
+
+WebInspector.QuickConsole.MainFrameContextExecutionIdentifier = undefined;
+
+WebInspector.QuickConsole.Event = {
+ DidResize: "quick-console-did-resize"
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsReplayDashboardViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ReplayDashboardView.js (182054 => 182055)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ReplayDashboardView.js 2015-03-27 07:26:27 UTC (rev 182054)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ReplayDashboardView.js 2015-03-27 07:26:35 UTC (rev 182055)
</span><span class="lines">@@ -1,4 +1,5 @@
</span><span class="cx"> /*
</span><ins>+ * Copyright (C) 2015 Apple Inc. All rights reserved.
</ins><span class="cx"> * Copyright (C) 2014 University of Washington. All rights reserved.
</span><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="lines">@@ -23,65 +24,56 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.ReplayDashboardView = function(representedObject)
</del><ins>+WebInspector.ReplayDashboardView = class ReplayDashboardView extends WebInspector.DashboardView
</ins><span class="cx"> {
</span><del>- WebInspector.DashboardView.call(this, representedObject, "replay");
</del><ins>+ constructor(representedObject)
+ {
+ super(representedObject, "replay");
</ins><span class="cx">
</span><del>- this._navigationBar = new WebInspector.NavigationBar;
- this.element.appendChild(this._navigationBar.element);
</del><ins>+ this._navigationBar = new WebInspector.NavigationBar;
+ this.element.appendChild(this._navigationBar.element);
</ins><span class="cx">
</span><del>- this._captureButtonItem = new WebInspector.ActivateButtonNavigationItem("replay-dashboard-capture", WebInspector.UIString("Start Recording"), WebInspector.UIString("Stop Recording"), "Images/ReplayRecordingButton.svg", 16, 16);
- this._captureButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._captureButtonItemClicked, this);
- this._captureButtonItem.hidden = true;
- this._navigationBar.addNavigationItem(this._captureButtonItem);
</del><ins>+ this._captureButtonItem = new WebInspector.ActivateButtonNavigationItem("replay-dashboard-capture", WebInspector.UIString("Start Recording"), WebInspector.UIString("Stop Recording"), "Images/ReplayRecordingButton.svg", 16, 16);
+ this._captureButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._captureButtonItemClicked, this);
+ this._captureButtonItem.hidden = true;
+ this._navigationBar.addNavigationItem(this._captureButtonItem);
</ins><span class="cx">
</span><del>- this._replayButtonItem = new WebInspector.ToggleButtonNavigationItem("replay-dashboard-replay", WebInspector.UIString("Start Playback"), WebInspector.UIString("Pause Playback"), "Images/ReplayPlayButton.svg", "Images/ReplayPauseButton.svg", 16, 16);
- this._replayButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._replayButtonItemClicked, this);
- this._replayButtonItem.hidden = true;
- this._navigationBar.addNavigationItem(this._replayButtonItem);
</del><ins>+ this._replayButtonItem = new WebInspector.ToggleButtonNavigationItem("replay-dashboard-replay", WebInspector.UIString("Start Playback"), WebInspector.UIString("Pause Playback"), "Images/ReplayPlayButton.svg", "Images/ReplayPauseButton.svg", 16, 16);
+ this._replayButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._replayButtonItemClicked, this);
+ this._replayButtonItem.hidden = true;
+ this._navigationBar.addNavigationItem(this._replayButtonItem);
</ins><span class="cx">
</span><del>- // Add events required to track capture and replay state.
- WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStarted, this._captureStarted, this);
- WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStopped, this._captureStopped, this);
- WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.PlaybackStarted, this._playbackStarted, this);
- WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.PlaybackPaused, this._playbackPaused, this);
- WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.PlaybackFinished, this._playbackFinished, this);
</del><ins>+ // Add events required to track capture and replay state.
+ WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStarted, this._captureStarted, this);
+ WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStopped, this._captureStopped, this);
+ WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.PlaybackStarted, this._playbackStarted, this);
+ WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.PlaybackPaused, this._playbackPaused, this);
+ WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.PlaybackFinished, this._playbackFinished, this);
</ins><span class="cx">
</span><del>- // Manually initialize style classes by querying current replay state.
- if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Capturing)
- this._captureStarted();
- else if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Inactive)
- this._captureStopped();
- // ReplayManager.sessionState must be Replaying.
- else if (WebInspector.replayManager.segmentState === WebInspector.ReplayManager.SegmentState.Dispatching)
- this._playbackStarted();
- // ReplayManager.sessionState must be Unloaded or Loaded, so execution is paused.
- else
- this._playbackPaused();
-};
-
-// Class names for top-level flex items within the replay dashboard.
-WebInspector.ReplayDashboardView.RecordingContainerStyleClassName = "recording-container";
-
-// Class names for single buttons.
-WebInspector.ReplayDashboardView.RecordButtonStyleClassName = "record-button";
-WebInspector.ReplayDashboardView.ReplayButtonStyleClassName = "replay-button";
-
-WebInspector.ReplayDashboardView.prototype = {
- constructor: WebInspector.ReplayDashboardView,
- __proto__: WebInspector.DashboardView.prototype,
-
</del><ins>+ // Manually initialize style classes by querying current replay state.
+ if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Capturing)
+ this._captureStarted();
+ else if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Inactive)
+ this._captureStopped();
+ // ReplayManager.sessionState must be Replaying.
+ else if (WebInspector.replayManager.segmentState === WebInspector.ReplayManager.SegmentState.Dispatching)
+ this._playbackStarted();
+ // ReplayManager.sessionState must be Unloaded or Loaded, so execution is paused.
+ else
+ this._playbackPaused();
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><del>- _captureButtonItemClicked: function()
</del><ins>+ _captureButtonItemClicked()
</ins><span class="cx"> {
</span><span class="cx"> if (WebInspector.replayManager.sessionState !== WebInspector.ReplayManager.SessionState.Capturing)
</span><span class="cx"> WebInspector.replayManager.startCapturing();
</span><span class="cx"> else
</span><span class="cx"> WebInspector.replayManager.stopCapturing();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _replayButtonItemClicked: function(event)
</del><ins>+ _replayButtonItemClicked(event)
</ins><span class="cx"> {
</span><span class="cx"> console.assert(WebInspector.replayManager.sessionState !== WebInspector.ReplayManager.SessionState.Capturing, "Tried to start replaying while SessionState is Capturing!");
</span><span class="cx">
</span><span class="lines">@@ -91,34 +83,38 @@
</span><span class="cx"> WebInspector.replayManager.pausePlayback();
</span><span class="cx"> else
</span><span class="cx"> WebInspector.replayManager.replayToCompletion();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _captureStarted: function()
</del><ins>+ _captureStarted()
</ins><span class="cx"> {
</span><span class="cx"> this._captureButtonItem.hidden = false;
</span><span class="cx"> this._captureButtonItem.activated = true;
</span><span class="cx"> this._replayButtonItem.hidden = true;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _captureStopped: function()
</del><ins>+ _captureStopped()
</ins><span class="cx"> {
</span><span class="cx"> this._captureButtonItem.activated = false;
</span><span class="cx"> this._captureButtonItem.hidden = true;
</span><span class="cx"> this._replayButtonItem.hidden = false;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _playbackStarted: function()
</del><ins>+ _playbackStarted()
</ins><span class="cx"> {
</span><span class="cx"> this._replayButtonItem.toggled = true;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _playbackPaused: function()
</del><ins>+ _playbackPaused()
</ins><span class="cx"> {
</span><span class="cx"> this._replayButtonItem.toggled = false;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _playbackFinished: function()
</del><ins>+ _playbackFinished()
</ins><span class="cx"> {
</span><span class="cx"> this._replayButtonItem.toggled = false;
</span><span class="cx"> }
</span><span class="cx"> };
</span><ins>+
+WebInspector.ReplayDashboardView.RecordingContainerStyleClassName = "recording-container";
+WebInspector.ReplayDashboardView.RecordButtonStyleClassName = "record-button";
+WebInspector.ReplayDashboardView.ReplayButtonStyleClassName = "replay-button";
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRulesStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js (182054 => 182055)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2015-03-27 07:26:27 UTC (rev 182054)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2015-03-27 07:26:35 UTC (rev 182055)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,23 +23,18 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.RulesStyleDetailsPanel = function()
</del><ins>+WebInspector.RulesStyleDetailsPanel = class RulesStyleDetailsPanel extends WebInspector.StyleDetailsPanel
</ins><span class="cx"> {
</span><del>- WebInspector.StyleDetailsPanel.call(this, WebInspector.RulesStyleDetailsPanel.StyleClassName, "rules", WebInspector.UIString("Rules"));
</del><ins>+ constructor()
+ {
+ super("rules", "rules", WebInspector.UIString("Rules"));
</ins><span class="cx">
</span><del>- this._sections = [];
-};
</del><ins>+ this._sections = [];
+ }
</ins><span class="cx">
</span><del>-WebInspector.RulesStyleDetailsPanel.StyleClassName = "rules";
-WebInspector.RulesStyleDetailsPanel.LabelElementStyleClassName = "label";
-WebInspector.RulesStyleDetailsPanel.NewRuleElementStyleClassName = "new-rule";
-
-WebInspector.RulesStyleDetailsPanel.prototype = {
- constructor: WebInspector.RulesStyleDetailsPanel,
-
</del><span class="cx"> // Public
</span><span class="cx">
</span><del>- refresh: function(significantChange)
</del><ins>+ refresh(significantChange)
</ins><span class="cx"> {
</span><span class="cx"> // We only need to do a rebuild on significant changes. Other changes are handled
</span><span class="cx"> // by the sections and text editors themselves.
</span><span class="lines">@@ -150,7 +145,7 @@
</span><span class="cx">
</span><span class="cx"> if (!this.nodeStyles.node.isInShadowTree()) {
</span><span class="cx"> var newRuleButton = document.createElement("div");
</span><del>- newRuleButton.className = WebInspector.RulesStyleDetailsPanel.NewRuleElementStyleClassName;
</del><ins>+ newRuleButton.className = "new-rule";
</ins><span class="cx"> newRuleButton.addEventListener("click", this._newRuleClicked.bind(this));
</span><span class="cx">
</span><span class="cx"> newRuleButton.appendChild(document.createElement("img"));
</span><span class="lines">@@ -189,7 +184,7 @@
</span><span class="cx"> prefixElement.textContent = WebInspector.UIString("Inherited From: ");
</span><span class="cx">
</span><span class="cx"> var inheritedLabel = document.createElement("div");
</span><del>- inheritedLabel.className = WebInspector.RulesStyleDetailsPanel.LabelElementStyleClassName;
</del><ins>+ inheritedLabel.className = "label";
</ins><span class="cx"> inheritedLabel.appendChild(prefixElement);
</span><span class="cx"> inheritedLabel.appendChild(WebInspector.linkifyNodeReference(style.node));
</span><span class="cx"> newDOMFragment.appendChild(inheritedLabel);
</span><span class="lines">@@ -212,7 +207,7 @@
</span><span class="cx"> prefixElement.textContent = WebInspector.UIString("Media: ");
</span><span class="cx">
</span><span class="cx"> var mediaLabel = document.createElement("div");
</span><del>- mediaLabel.className = WebInspector.RulesStyleDetailsPanel.LabelElementStyleClassName;
</del><ins>+ mediaLabel.className = "label";
</ins><span class="cx"> mediaLabel.appendChild(prefixElement);
</span><span class="cx"> mediaLabel.appendChild(document.createTextNode(media.text));
</span><span class="cx">
</span><span class="lines">@@ -244,11 +239,11 @@
</span><span class="cx">
</span><span class="cx"> if (previousFocusedSection)
</span><span class="cx"> previousFocusedSection.focus();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> // Protected
</span><span class="cx">
</span><del>- shown: function()
</del><ins>+ shown()
</ins><span class="cx"> {
</span><span class="cx"> WebInspector.StyleDetailsPanel.prototype.shown.call(this);
</span><span class="cx">
</span><span class="lines">@@ -259,9 +254,9 @@
</span><span class="cx"> section.style.__rulesSection = section;
</span><span class="cx"> section.updateLayout();
</span><span class="cx"> }
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- hidden: function()
</del><ins>+ hidden()
</ins><span class="cx"> {
</span><span class="cx"> WebInspector.StyleDetailsPanel.prototype.hidden.call(this);
</span><span class="cx">
</span><span class="lines">@@ -269,21 +264,19 @@
</span><span class="cx"> // to release their objects when this panel is not visible.
</span><span class="cx"> for (var i = 0; i < this._sections.length; ++i)
</span><span class="cx"> delete this._sections[i].style.__rulesSection;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- widthDidChange: function()
</del><ins>+ widthDidChange()
</ins><span class="cx"> {
</span><span class="cx"> for (var i = 0; i < this._sections.length; ++i)
</span><span class="cx"> this._sections[i].updateLayout();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><del>- _newRuleClicked: function(event)
</del><ins>+ _newRuleClicked(event)
</ins><span class="cx"> {
</span><span class="cx"> this._focusNextNewInspectorRule = true;
</span><span class="cx"> this.nodeStyles.addEmptyRule();
</span><span class="cx"> }
</span><span class="cx"> };
</span><del>-
-WebInspector.RulesStyleDetailsPanel.prototype.__proto__ = WebInspector.StyleDetailsPanel.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js (182054 => 182055)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js 2015-03-27 07:26:27 UTC (rev 182054)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js 2015-03-27 07:26:35 UTC (rev 182055)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,43 +23,42 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.StyleDetailsPanel = function(className, identifier, label)
</del><ins>+WebInspector.StyleDetailsPanel = class StyleDetailsPanel extends WebInspector.Object
</ins><span class="cx"> {
</span><del>- this._element = document.createElement("div");
- this._element.className = className;
</del><ins>+ constructor(className, identifier, label)
+ {
+ super();
</ins><span class="cx">
</span><del>- // Add this offset-sections class name so the sticky headers don't overlap the navigation bar.
- this.element.classList.add(WebInspector.StyleDetailsPanel.OffsetSectionsStyleClassName);
</del><ins>+ this._element = document.createElement("div");
+ this._element.className = className;
</ins><span class="cx">
</span><del>- this._navigationItem = new WebInspector.RadioButtonNavigationItem(identifier, label);
</del><ins>+ // Add this offset-sections class name so the sticky headers don't overlap the navigation bar.
+ this.element.classList.add("offset-sections");
</ins><span class="cx">
</span><del>- this._nodeStyles = null;
- this._visible = false;
-};
</del><ins>+ this._navigationItem = new WebInspector.RadioButtonNavigationItem(identifier, label);
</ins><span class="cx">
</span><del>-WebInspector.StyleDetailsPanel.OffsetSectionsStyleClassName = "offset-sections";
</del><ins>+ this._nodeStyles = null;
+ this._visible = false;
+ }
</ins><span class="cx">
</span><del>-WebInspector.StyleDetailsPanel.prototype = {
- constructor: WebInspector.StyleDetailsPanel,
-
</del><span class="cx"> // Public
</span><span class="cx">
</span><span class="cx"> get element()
</span><span class="cx"> {
</span><span class="cx"> return this._element;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> get navigationItem()
</span><span class="cx"> {
</span><span class="cx"> return this._navigationItem;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> get nodeStyles()
</span><span class="cx"> {
</span><span class="cx"> return this._nodeStyles;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- shown: function()
</del><ins>+ shown()
</ins><span class="cx"> {
</span><span class="cx"> if (this._visible)
</span><span class="cx"> return;
</span><span class="lines">@@ -67,19 +66,19 @@
</span><span class="cx"> this._visible = true;
</span><span class="cx">
</span><span class="cx"> this._refreshNodeStyles();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- hidden: function()
</del><ins>+ hidden()
</ins><span class="cx"> {
</span><span class="cx"> this._visible = false;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- widthDidChange: function()
</del><ins>+ widthDidChange()
</ins><span class="cx"> {
</span><span class="cx"> // Implemented by subclasses.
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- markAsNeedsRefresh: function(domNode)
</del><ins>+ markAsNeedsRefresh(domNode)
</ins><span class="cx"> {
</span><span class="cx"> console.assert(domNode);
</span><span class="cx"> if (!domNode)
</span><span class="lines">@@ -105,12 +104,12 @@
</span><span class="cx">
</span><span class="cx"> if (this._visible)
</span><span class="cx"> this._refreshNodeStyles();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- refresh: function(significantChange)
</del><ins>+ refresh(significantChange)
</ins><span class="cx"> {
</span><span class="cx"> // Implemented by subclasses.
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><span class="lines">@@ -119,16 +118,16 @@
</span><span class="cx"> if (!WebInspector.cssStyleManager.canForcePseudoClasses())
</span><span class="cx"> return 0;
</span><span class="cx"> return this.nodeStyles.node.enabledPseudoClasses.length ? 0 : WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _refreshNodeStyles: function()
</del><ins>+ _refreshNodeStyles()
</ins><span class="cx"> {
</span><span class="cx"> if (!this._nodeStyles)
</span><span class="cx"> return;
</span><span class="cx"> this._nodeStyles.refresh();
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _refreshPreservingScrollPosition: function(significantChange)
</del><ins>+ _refreshPreservingScrollPosition(significantChange)
</ins><span class="cx"> {
</span><span class="cx"> significantChange = this._forceSignificantChange || significantChange || false;
</span><span class="cx"> delete this._forceSignificantChange;
</span><span class="lines">@@ -145,19 +144,17 @@
</span><span class="cx">
</span><span class="cx"> if (this.element.parentNode)
</span><span class="cx"> this.element.parentNode.scrollTop = previousScrollTop;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _nodeStylesRefreshed: function(event)
</del><ins>+ _nodeStylesRefreshed(event)
</ins><span class="cx"> {
</span><span class="cx"> if (this._visible)
</span><span class="cx"> this._refreshPreservingScrollPosition(event.data.significantChange);
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- _nodeStylesNeedsRefreshed: function(event)
</del><ins>+ _nodeStylesNeedsRefreshed(event)
</ins><span class="cx"> {
</span><span class="cx"> if (this._visible)
</span><span class="cx"> this._refreshNodeStyles();
</span><span class="cx"> }
</span><span class="cx"> };
</span><del>-
-WebInspector.StyleDetailsPanel.prototype.__proto__ = WebInspector.Object.prototype;
</del></span></pre>
</div>
</div>
</body>
</html>