<!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>[208091] 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/208091">208091</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-10-28 18:17:43 -0700 (Fri, 28 Oct 2016)</dd>
</dl>

<h3>Log Message</h3>
<pre>Web Inspector: Preferences for Text Editor behavior
https://bugs.webkit.org/show_bug.cgi?id=149120

Patch by Devin Rousso &lt;dcrousso+webkit@gmail.com&gt; on 2016-10-28
Reviewed by Timothy Hatcher.

* Localizations/en.lproj/localizedStrings.js:

* UserInterface/Base/Main.js:
(WebInspector.loaded):
(WebInspector.contentLoaded):
(WebInspector.contentLoaded.setTabSize):
(WebInspector.contentLoaded.setInvalidCharacterClassName):
(WebInspector.contentLoaded.setWhitespaceCharacterClassName):
(WebInspector._tryToRestorePendingTabs):
(WebInspector.indentString):
(WebInspector._updateNewTabButtonState): Deleted.
(WebInspector._newTabItemClicked): Deleted.
Removed calls to the New Tab tab bar item on the Tab Bar instance.
Added listener to the indentUnit setting to change the tab-size value on &lt;body&gt;.
Created helper function to generate the indentString value from settings.

* UserInterface/Base/Test.js:
(WebInspector.indentString):
Assume indent string is &quot;    &quot; for tests.

* UserInterface/Base/Setting.js:
Added global WebInspector.settings dictionary for holding settings with UI editors.

* UserInterface/Main.html:
Added GeneralTabBarItem, PinnedTabBarItem, and SettingsTabContentView.

* UserInterface/Models/CSSStyleDeclaration.js:
(WebInspector.CSSStyleDeclaration.prototype.generateCSSRuleString):
* UserInterface/Views/CSSStyleDeclarationTextEditor.js:
(WebInspector.CSSStyleDeclarationTextEditor.prototype._formattedContentFromEditor):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent.update):
* UserInterface/Views/VisualStylePropertyEditor.js:
(WebInspector.VisualStylePropertyEditor.generateFormattedTextForNewProperty):
* UserInterface/Views/SourceCodeTextEditor.js:
(WebInspector.SourceCodeTextEditor.prototype._showPopoverForFunction.didGetDetails):
Now uses WebInspector.indentUnit for indentation values

* UserInterface/Views/CodeMirrorAdditions.js:
Added &quot;showWhitespaceCharacter&quot; option to CodeMirror.  When enabled, it adds an overlay to
the editor that will use pseudo-elements to display whitespace characters (unicode 00B7).

* UserInterface/Views/CodeMirrorOverrides.css:
(.CodeMirror .cm-tab):
(.show-whitespace-characters .CodeMirror .cm-tab::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace-1::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace-2::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace-3::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace-4::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace-5::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace-6::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace-7::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace-8::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace-9::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace-10::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace-11::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace-12::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace-13::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace-14::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace-15::before):
(.show-whitespace-characters .CodeMirror .cm-whitespace-16::before):
(.show-invalid-characters .CodeMirror .cm-invalidchar):
(.CodeMirror .cm-invalidchar): Deleted.
Use unicode character 00B7 (middle dot) to display a space.  Also uses a grey border for
visualizing tab characters.

* UserInterface/Views/ApplicationCacheFrameContentView.js:
* UserInterface/Views/CSSStyleDeclarationTextEditor.js:
* UserInterface/Views/ClusterContentView.js:
* UserInterface/Views/DOMTreeContentView.js:
* UserInterface/Views/DatabaseContentView.js:
* UserInterface/Views/IndexedDatabaseObjectStoreContentView.js:
* UserInterface/Views/NetworkGridContentView.js:
* UserInterface/Views/ResourceContentView.js:
* UserInterface/Views/ScriptContentView.js:
* UserInterface/Views/TabContentView.js:
* UserInterface/Views/TimelineRecordingContentView.js:
Add calls to super.shown(), super.hidden(), and super.closed().

* UserInterface/Views/ConsoleTabContentView.js:
* UserInterface/Views/DebuggerTabContentView.js:
* UserInterface/Views/ElementsTabContentView.js:
* UserInterface/Views/NetworkTabContentView.js:
* UserInterface/Views/NewTabContentView.js:
* UserInterface/Views/ResourcesTabContentView.js:
* UserInterface/Views/SearchTabContentView.js:
* UserInterface/Views/StorageTabContentView.js:
* UserInterface/Views/TimelineTabContentView.js:
Now uses WebInspector.GeneralTabBarItem.

* UserInterface/Views/GeneralTabBarItem.js: Added.
(WebInspector.GeneralTabBarItem):
(WebInspector.GeneralTabBarItem.prototype.set title):
(WebInspector.GeneralTabBarItem.prototype._handleContextMenuEvent):
Split from TabBarItem.js to make pinned tab bar items more distinct.

* UserInterface/Views/Main.css:
(body):
Removed tab-size.

* UserInterface/Views/PinnedTabBarItem.js: Added.
(WebInspector.PinnedTabBarItem):
Split from TabBarItem.js to make pinned tab bar items more distinct.

* UserInterface/Views/SettingsTabContentView.css: Added.
(.content-view.settings):
(.content-view.settings &gt; .header):
(.content-view.settings &gt; .setting-container):
(.content-view.settings &gt; .setting-container &gt; .setting-name):
(.content-view.settings &gt; .setting-container &gt; .setting-value-controller):
(.content-view.settings &gt; .setting-container &gt; .setting-value-controller input[type=&quot;number&quot;]):

* UserInterface/Views/SettingsTabContentView.js:
(WebInspector.SettingsTabContentView):
(WebInspector.SettingsTabContentView.tabInfo):
(WebInspector.SettingsTabContentView.isEphemeral):
(WebInspector.SettingsTabContentView.shouldSaveTab):
(WebInspector.SettingsTabContentView.prototype.initialLayout):
(WebInspector.SettingsTabContentView.isTabAllowed): Deleted.
(WebInspector.SettingsTabContentView.prototype.get type): Deleted.
Added logic to display an appropriate editor for each item in WebInspector.settings.

* UserInterface/Views/SourceCodeTextEditor.js:
(WebInspector.SourceCodeTextEditor.prototype.close):
Add call to super.close().

* UserInterface/Views/TabBar.css:
(.tab-bar:not(.animating) &gt; .item:not(.selected, .disabled):hover):
(.tab-bar &gt; .item:not(.pinned) &gt; .flex-space:last-child):
(.tab-bar &gt; .item.pinned &gt; .icon):
(.tab-bar:not(.animating) &gt; .item:not(.selected, .disabled):hover &gt; .icon):
(.tab-bar:not(.animating) &gt; .item:not(.selected, .disabled):hover,): Deleted.
(.tab-bar &gt; .item &gt; .flex-space:last-child): Deleted.
(.tab-bar &gt; .item.new-tab-button &gt; .icon): Deleted.
(.tab-bar:not(.animating) &gt; .item:not(.selected, .disabled):hover &gt; .icon,): Deleted.
Removed rules specifically targeting `.new-tab-button`.

* UserInterface/Views/TabBar.js:
(WebInspector.TabBar):
(WebInspector.TabBar.prototype.get newTabTabBarItem):
(WebInspector.TabBar.prototype.updateNewTabTabBarItemState):
(WebInspector.TabBar.prototype.insertTabBarItem):
(WebInspector.TabBar.prototype.removeTabBarItem.animateTabs):
(WebInspector.TabBar.prototype.removeTabBarItem):
(WebInspector.TabBar.prototype.selectPreviousTab):
(WebInspector.TabBar.prototype.selectNextTab):
(WebInspector.TabBar.prototype.set selectedTabBarItem):
(WebInspector.TabBar.prototype.hasNormalTab):
(WebInspector.TabBar.prototype.layout):
(WebInspector.TabBar.prototype._hasMoreThanOneNormalTab):
(WebInspector.TabBar.prototype._handleMouseDown):
(WebInspector.TabBar.prototype._handleMouseMoved):
(WebInspector.TabBar.prototype._handleMouseLeave):
(WebInspector.TabBar.prototype._handleNewTabClick):
(WebInspector.TabBar.prototype._handleNewTabMouseEnter):
(WebInspector.TabBar.prototype.get newTabItem): Deleted.
(WebInspector.TabBar.prototype.set newTabItem): Deleted.
Replaced the newTabItem setter by adding a saved pinned tab bar item (instead of relying
upon a different object to give it the pinned tab bar item) that changes modes depending on
whether a new tab is able to be created.

* UserInterface/Views/TabBarItem.js:
(WebInspector.TabBarItem):
(WebInspector.TabBarItem.prototype.get element):
(WebInspector.TabBarItem.prototype.get representedObject):
(WebInspector.TabBarItem.prototype.set representedObject):
(WebInspector.TabBarItem.prototype.get parentTabBar):
(WebInspector.TabBarItem.prototype.set parentTabBar):
(WebInspector.TabBarItem.prototype.get image):
(WebInspector.TabBarItem.prototype.set image):
(WebInspector.TabBarItem.prototype.get title):
(WebInspector.TabBarItem.prototype.set title):
(WebInspector.TabBarItem.prototype.get pinned): Deleted.
(WebInspector.TabBarItem.prototype._handleContextMenuEvent): Deleted.
Split into GeneralTabBarItem and PinnedTabBarItem to simplify the logic of the DOM and allow
for easier checking of whether a tab bar item is pinned or not.

* UserInterface/Views/TabBrowser.js:
(WebInspector.TabBrowser):
(WebInspector.TabBrowser.prototype.addTabForContentView):
(WebInspector.TabBrowser.prototype.closeTabForContentView):
(WebInspector.TabBrowser.prototype._tabBarItemSelected):
(WebInspector.TabBrowser.prototype._tabBarItemRemoved):
Replaced references to newTabItem with a set number (since each TabBar has a specific number
of pinned tabs).

* UserInterface/Views/TextEditor.js:
(WebInspector.TextEditor):
(WebInspector.TextEditor.prototype.close):.
Remove settings update event listeners to allow garbage collection.

(WebInspector.TextEditor.prototype._startWorkerPrettyPrint):
(WebInspector.TextEditor.prototype._startCodeMirrorPrettyPrint):
Now uses the settings values in WebInspector.setting for settings on the CodeMirror
instance.  Also updates the CodeMirror instance if any setting changes.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBaseMainjs">trunk/Source/WebInspectorUI/UserInterface/Base/Main.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBaseSettingjs">trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsCSSStyleDeclarationjs">trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTestTestjs">trunk/Source/WebInspectorUI/UserInterface/Test/Test.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsApplicationCacheFrameContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsClusterContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ClusterContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCodeMirrorAdditionsjs">trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCodeMirrorOverridescss">trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsConsoleTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleTabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDatabaseContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDebuggerTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerTabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsElementsTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ElementsTabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsIndexedDatabaseObjectStoreContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsMaincss">trunk/Source/WebInspectorUI/UserInterface/Views/Main.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkGridContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNewTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourceContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ResourceContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourcesTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ResourcesTabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsScriptContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ScriptContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSearchTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/SearchTabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSettingsTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSourceCodeTextEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsStorageTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/StorageTabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTabBarcss">trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTabBarjs">trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTabBarItemjs">trunk/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTabBrowserjs">trunk/Source/WebInspectorUI/UserInterface/Views/TabBrowser.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTextEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsGeneralTabBarItemjs">trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTabBarItem.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsPinnedTabBarItemjs">trunk/Source/WebInspectorUI/UserInterface/Views/PinnedTabBarItem.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSettingsTabContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/ChangeLog        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -1,3 +1,206 @@
</span><ins>+2016-10-28  Devin Rousso  &lt;dcrousso+webkit@gmail.com&gt;
+
+        Web Inspector: Preferences for Text Editor behavior
+        https://bugs.webkit.org/show_bug.cgi?id=149120
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+        * UserInterface/Base/Main.js:
+        (WebInspector.loaded):
+        (WebInspector.contentLoaded):
+        (WebInspector.contentLoaded.setTabSize):
+        (WebInspector.contentLoaded.setInvalidCharacterClassName):
+        (WebInspector.contentLoaded.setWhitespaceCharacterClassName):
+        (WebInspector._tryToRestorePendingTabs):
+        (WebInspector.indentString):
+        (WebInspector._updateNewTabButtonState): Deleted.
+        (WebInspector._newTabItemClicked): Deleted.
+        Removed calls to the New Tab tab bar item on the Tab Bar instance.
+        Added listener to the indentUnit setting to change the tab-size value on &lt;body&gt;.
+        Created helper function to generate the indentString value from settings.
+
+        * UserInterface/Base/Test.js:
+        (WebInspector.indentString):
+        Assume indent string is &quot;    &quot; for tests.
+
+        * UserInterface/Base/Setting.js:
+        Added global WebInspector.settings dictionary for holding settings with UI editors.
+
+        * UserInterface/Main.html:
+        Added GeneralTabBarItem, PinnedTabBarItem, and SettingsTabContentView.
+
+        * UserInterface/Models/CSSStyleDeclaration.js:
+        (WebInspector.CSSStyleDeclaration.prototype.generateCSSRuleString):
+        * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._formattedContentFromEditor):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent.update):
+        * UserInterface/Views/VisualStylePropertyEditor.js:
+        (WebInspector.VisualStylePropertyEditor.generateFormattedTextForNewProperty):
+        * UserInterface/Views/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForFunction.didGetDetails):
+        Now uses WebInspector.indentUnit for indentation values
+
+        * UserInterface/Views/CodeMirrorAdditions.js:
+        Added &quot;showWhitespaceCharacter&quot; option to CodeMirror.  When enabled, it adds an overlay to
+        the editor that will use pseudo-elements to display whitespace characters (unicode 00B7).
+
+        * UserInterface/Views/CodeMirrorOverrides.css:
+        (.CodeMirror .cm-tab):
+        (.show-whitespace-characters .CodeMirror .cm-tab::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace-1::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace-2::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace-3::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace-4::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace-5::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace-6::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace-7::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace-8::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace-9::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace-10::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace-11::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace-12::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace-13::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace-14::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace-15::before):
+        (.show-whitespace-characters .CodeMirror .cm-whitespace-16::before):
+        (.show-invalid-characters .CodeMirror .cm-invalidchar):
+        (.CodeMirror .cm-invalidchar): Deleted.
+        Use unicode character 00B7 (middle dot) to display a space.  Also uses a grey border for
+        visualizing tab characters.
+
+        * UserInterface/Views/ApplicationCacheFrameContentView.js:
+        * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
+        * UserInterface/Views/ClusterContentView.js:
+        * UserInterface/Views/DOMTreeContentView.js:
+        * UserInterface/Views/DatabaseContentView.js:
+        * UserInterface/Views/IndexedDatabaseObjectStoreContentView.js:
+        * UserInterface/Views/NetworkGridContentView.js:
+        * UserInterface/Views/ResourceContentView.js:
+        * UserInterface/Views/ScriptContentView.js:
+        * UserInterface/Views/TabContentView.js:
+        * UserInterface/Views/TimelineRecordingContentView.js:
+        Add calls to super.shown(), super.hidden(), and super.closed().
+
+        * UserInterface/Views/ConsoleTabContentView.js:
+        * UserInterface/Views/DebuggerTabContentView.js:
+        * UserInterface/Views/ElementsTabContentView.js:
+        * UserInterface/Views/NetworkTabContentView.js:
+        * UserInterface/Views/NewTabContentView.js:
+        * UserInterface/Views/ResourcesTabContentView.js:
+        * UserInterface/Views/SearchTabContentView.js:
+        * UserInterface/Views/StorageTabContentView.js:
+        * UserInterface/Views/TimelineTabContentView.js:
+        Now uses WebInspector.GeneralTabBarItem.
+
+        * UserInterface/Views/GeneralTabBarItem.js: Added.
+        (WebInspector.GeneralTabBarItem):
+        (WebInspector.GeneralTabBarItem.prototype.set title):
+        (WebInspector.GeneralTabBarItem.prototype._handleContextMenuEvent):
+        Split from TabBarItem.js to make pinned tab bar items more distinct.
+
+        * UserInterface/Views/Main.css:
+        (body):
+        Removed tab-size.
+
+        * UserInterface/Views/PinnedTabBarItem.js: Added.
+        (WebInspector.PinnedTabBarItem):
+        Split from TabBarItem.js to make pinned tab bar items more distinct.
+
+        * UserInterface/Views/SettingsTabContentView.css: Added.
+        (.content-view.settings):
+        (.content-view.settings &gt; .header):
+        (.content-view.settings &gt; .setting-container):
+        (.content-view.settings &gt; .setting-container &gt; .setting-name):
+        (.content-view.settings &gt; .setting-container &gt; .setting-value-controller):
+        (.content-view.settings &gt; .setting-container &gt; .setting-value-controller input[type=&quot;number&quot;]):
+
+        * UserInterface/Views/SettingsTabContentView.js:
+        (WebInspector.SettingsTabContentView):
+        (WebInspector.SettingsTabContentView.tabInfo):
+        (WebInspector.SettingsTabContentView.isEphemeral):
+        (WebInspector.SettingsTabContentView.shouldSaveTab):
+        (WebInspector.SettingsTabContentView.prototype.initialLayout):
+        (WebInspector.SettingsTabContentView.isTabAllowed): Deleted.
+        (WebInspector.SettingsTabContentView.prototype.get type): Deleted.
+        Added logic to display an appropriate editor for each item in WebInspector.settings.
+
+        * UserInterface/Views/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.close):
+        Add call to super.close().
+
+        * UserInterface/Views/TabBar.css:
+        (.tab-bar:not(.animating) &gt; .item:not(.selected, .disabled):hover):
+        (.tab-bar &gt; .item:not(.pinned) &gt; .flex-space:last-child):
+        (.tab-bar &gt; .item.pinned &gt; .icon):
+        (.tab-bar:not(.animating) &gt; .item:not(.selected, .disabled):hover &gt; .icon):
+        (.tab-bar:not(.animating) &gt; .item:not(.selected, .disabled):hover,): Deleted.
+        (.tab-bar &gt; .item &gt; .flex-space:last-child): Deleted.
+        (.tab-bar &gt; .item.new-tab-button &gt; .icon): Deleted.
+        (.tab-bar:not(.animating) &gt; .item:not(.selected, .disabled):hover &gt; .icon,): Deleted.
+        Removed rules specifically targeting `.new-tab-button`.
+
+        * UserInterface/Views/TabBar.js:
+        (WebInspector.TabBar):
+        (WebInspector.TabBar.prototype.get newTabTabBarItem):
+        (WebInspector.TabBar.prototype.updateNewTabTabBarItemState):
+        (WebInspector.TabBar.prototype.insertTabBarItem):
+        (WebInspector.TabBar.prototype.removeTabBarItem.animateTabs):
+        (WebInspector.TabBar.prototype.removeTabBarItem):
+        (WebInspector.TabBar.prototype.selectPreviousTab):
+        (WebInspector.TabBar.prototype.selectNextTab):
+        (WebInspector.TabBar.prototype.set selectedTabBarItem):
+        (WebInspector.TabBar.prototype.hasNormalTab):
+        (WebInspector.TabBar.prototype.layout):
+        (WebInspector.TabBar.prototype._hasMoreThanOneNormalTab):
+        (WebInspector.TabBar.prototype._handleMouseDown):
+        (WebInspector.TabBar.prototype._handleMouseMoved):
+        (WebInspector.TabBar.prototype._handleMouseLeave):
+        (WebInspector.TabBar.prototype._handleNewTabClick):
+        (WebInspector.TabBar.prototype._handleNewTabMouseEnter):
+        (WebInspector.TabBar.prototype.get newTabItem): Deleted.
+        (WebInspector.TabBar.prototype.set newTabItem): Deleted.
+        Replaced the newTabItem setter by adding a saved pinned tab bar item (instead of relying
+        upon a different object to give it the pinned tab bar item) that changes modes depending on
+        whether a new tab is able to be created.
+
+        * UserInterface/Views/TabBarItem.js:
+        (WebInspector.TabBarItem):
+        (WebInspector.TabBarItem.prototype.get element):
+        (WebInspector.TabBarItem.prototype.get representedObject):
+        (WebInspector.TabBarItem.prototype.set representedObject):
+        (WebInspector.TabBarItem.prototype.get parentTabBar):
+        (WebInspector.TabBarItem.prototype.set parentTabBar):
+        (WebInspector.TabBarItem.prototype.get image):
+        (WebInspector.TabBarItem.prototype.set image):
+        (WebInspector.TabBarItem.prototype.get title):
+        (WebInspector.TabBarItem.prototype.set title):
+        (WebInspector.TabBarItem.prototype.get pinned): Deleted.
+        (WebInspector.TabBarItem.prototype._handleContextMenuEvent): Deleted.
+        Split into GeneralTabBarItem and PinnedTabBarItem to simplify the logic of the DOM and allow
+        for easier checking of whether a tab bar item is pinned or not.
+
+        * UserInterface/Views/TabBrowser.js:
+        (WebInspector.TabBrowser):
+        (WebInspector.TabBrowser.prototype.addTabForContentView):
+        (WebInspector.TabBrowser.prototype.closeTabForContentView):
+        (WebInspector.TabBrowser.prototype._tabBarItemSelected):
+        (WebInspector.TabBrowser.prototype._tabBarItemRemoved):
+        Replaced references to newTabItem with a set number (since each TabBar has a specific number
+        of pinned tabs).
+
+        * UserInterface/Views/TextEditor.js:
+        (WebInspector.TextEditor):
+        (WebInspector.TextEditor.prototype.close):.
+        Remove settings update event listeners to allow garbage collection.
+
+        (WebInspector.TextEditor.prototype._startWorkerPrettyPrint):
+        (WebInspector.TextEditor.prototype._startCodeMirrorPrettyPrint):
+        Now uses the settings values in WebInspector.setting for settings on the CodeMirror
+        instance.  Also updates the CodeMirror instance if any setting changes.
+
</ins><span class="cx"> 2016-10-28  Joseph Pecoraro  &lt;pecoraro@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Web Inspector: Include parameter strings for native CustomElementRegistry methods in the console
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -391,15 +391,15 @@
</span><span class="cx"> localizedStrings[&quot;Grow&quot;] = &quot;Grow&quot;;
</span><span class="cx"> localizedStrings[&quot;HTML Attributes&quot;] = &quot;HTML Attributes&quot;;
</span><span class="cx"> localizedStrings[&quot;HTTP&quot;] = &quot;HTTP&quot;;
</span><ins>+localizedStrings[&quot;Heading Level&quot;] = &quot;Heading Level&quot;;
</ins><span class="cx"> localizedStrings[&quot;Heap Snapshot Object (@%d)&quot;] = &quot;Heap Snapshot Object (@%d)&quot;;
</span><span class="cx"> localizedStrings[&quot;Height&quot;] = &quot;Height&quot;;
</span><del>-localizedStrings[&quot;Heading Level&quot;] = &quot;Heading Level&quot;;
-localizedStrings[&quot;Hierarchy Level&quot;] = &quot;Hierarchy Level&quot;;
</del><span class="cx"> localizedStrings[&quot;Hide compositing borders&quot;] = &quot;Hide compositing borders&quot;;
</span><span class="cx"> localizedStrings[&quot;Hide shadow DOM nodes&quot;] = &quot;Hide shadow DOM nodes&quot;;
</span><span class="cx"> localizedStrings[&quot;Hide the details sidebar (%s)&quot;] = &quot;Hide the details sidebar (%s)&quot;;
</span><span class="cx"> localizedStrings[&quot;Hide the navigation sidebar (%s)&quot;] = &quot;Hide the navigation sidebar (%s)&quot;;
</span><span class="cx"> localizedStrings[&quot;Hide type information&quot;] = &quot;Hide type information&quot;;
</span><ins>+localizedStrings[&quot;Hierarchy Level&quot;] = &quot;Hierarchy Level&quot;;
</ins><span class="cx"> localizedStrings[&quot;Highest: %s&quot;] = &quot;Highest: %s&quot;;
</span><span class="cx"> localizedStrings[&quot;Horizontal&quot;] = &quot;Horizontal&quot;;
</span><span class="cx"> localizedStrings[&quot;Host&quot;] = &quot;Host&quot;;
</span><span class="lines">@@ -414,6 +414,7 @@
</span><span class="cx"> localizedStrings[&quot;Images&quot;] = &quot;Images&quot;;
</span><span class="cx"> localizedStrings[&quot;Immediate Pause Requested&quot;] = &quot;Immediate Pause Requested&quot;;
</span><span class="cx"> localizedStrings[&quot;Indent&quot;] = &quot;Indent&quot;;
</span><ins>+localizedStrings[&quot;Indent width:&quot;] = &quot;Indent width:&quot;;
</ins><span class="cx"> localizedStrings[&quot;Index&quot;] = &quot;Index&quot;;
</span><span class="cx"> localizedStrings[&quot;Index Key \u2014 %s&quot;] = &quot;Index Key \u2014 %s&quot;;
</span><span class="cx"> localizedStrings[&quot;Indexed Databases&quot;] = &quot;Indexed Databases&quot;;
</span><span class="lines">@@ -427,6 +428,7 @@
</span><span class="cx"> localizedStrings[&quot;Inset&quot;] = &quot;Inset&quot;;
</span><span class="cx"> localizedStrings[&quot;Instances&quot;] = &quot;Instances&quot;;
</span><span class="cx"> localizedStrings[&quot;Invalid&quot;] = &quot;Invalid&quot;;
</span><ins>+localizedStrings[&quot;Invalid Characters:&quot;] = &quot;Invalid Characters:&quot;;
</ins><span class="cx"> localizedStrings[&quot;Inverted&quot;] = &quot;Inverted&quot;;
</span><span class="cx"> localizedStrings[&quot;Invoke getter&quot;] = &quot;Invoke getter&quot;;
</span><span class="cx"> localizedStrings[&quot;Iterations&quot;] = &quot;Iterations&quot;;
</span><span class="lines">@@ -453,6 +455,7 @@
</span><span class="cx"> localizedStrings[&quot;Line %d&quot;] = &quot;Line %d&quot;;
</span><span class="cx"> localizedStrings[&quot;Line %d:%d&quot;] = &quot;Line %d:%d&quot;;
</span><span class="cx"> localizedStrings[&quot;Line Number&quot;] = &quot;Line Number&quot;;
</span><ins>+localizedStrings[&quot;Line wrapping:&quot;] = &quot;Line wrapping:&quot;;
</ins><span class="cx"> localizedStrings[&quot;Linear Gradient&quot;] = &quot;Linear Gradient&quot;;
</span><span class="cx"> localizedStrings[&quot;List Styles&quot;] = &quot;List Styles&quot;;
</span><span class="cx"> localizedStrings[&quot;Live&quot;] = &quot;Live&quot;;
</span><span class="lines">@@ -536,6 +539,7 @@
</span><span class="cx"> localizedStrings[&quot;Only show resources with issues&quot;] = &quot;Only show resources with issues&quot;;
</span><span class="cx"> localizedStrings[&quot;Opacity&quot;] = &quot;Opacity&quot;;
</span><span class="cx"> localizedStrings[&quot;Open&quot;] = &quot;Open&quot;;
</span><ins>+localizedStrings[&quot;Open Settings&quot;] = &quot;Open Settings&quot;;
</ins><span class="cx"> localizedStrings[&quot;Open in New Tab&quot;] = &quot;Open in New Tab&quot;;
</span><span class="cx"> localizedStrings[&quot;Option-click to show all units&quot;] = &quot;Option-click to show all units&quot;;
</span><span class="cx"> localizedStrings[&quot;Option-click to show all values&quot;] = &quot;Option-click to show all values&quot;;
</span><span class="lines">@@ -575,6 +579,7 @@
</span><span class="cx"> localizedStrings[&quot;Position&quot;] = &quot;Position&quot;;
</span><span class="cx"> localizedStrings[&quot;Position X&quot;] = &quot;Position X&quot;;
</span><span class="cx"> localizedStrings[&quot;Position Y&quot;] = &quot;Position Y&quot;;
</span><ins>+localizedStrings[&quot;Prefer indent using:&quot;] = &quot;Prefer indent using:&quot;;
</ins><span class="cx"> localizedStrings[&quot;Pressed&quot;] = &quot;Pressed&quot;;
</span><span class="cx"> localizedStrings[&quot;Pretty print&quot;] = &quot;Pretty print&quot;;
</span><span class="cx"> localizedStrings[&quot;Primary Key&quot;] = &quot;Primary Key&quot;;
</span><span class="lines">@@ -702,6 +707,7 @@
</span><span class="cx"> localizedStrings[&quot;Sort Ascending&quot;] = &quot;Sort Ascending&quot;;
</span><span class="cx"> localizedStrings[&quot;Sort Descending&quot;] = &quot;Sort Descending&quot;;
</span><span class="cx"> localizedStrings[&quot;Sources&quot;] = &quot;Sources&quot;;
</span><ins>+localizedStrings[&quot;Spaces&quot;] = &quot;Spaces&quot;;
</ins><span class="cx"> localizedStrings[&quot;Spacing&quot;] = &quot;Spacing&quot;;
</span><span class="cx"> localizedStrings[&quot;Specificity: (%d, %d, %d)&quot;] = &quot;Specificity: (%d, %d, %d)&quot;;
</span><span class="cx"> localizedStrings[&quot;Specificity: No value for selected element&quot;] = &quot;Specificity: No value for selected element&quot;;
</span><span class="lines">@@ -738,6 +744,8 @@
</span><span class="cx"> localizedStrings[&quot;Styles \u2014 Visual&quot;] = &quot;Styles \u2014 Visual&quot;;
</span><span class="cx"> localizedStrings[&quot;Stylesheet&quot;] = &quot;Stylesheet&quot;;
</span><span class="cx"> localizedStrings[&quot;Stylesheets&quot;] = &quot;Stylesheets&quot;;
</span><ins>+localizedStrings[&quot;Tab width:&quot;] = &quot;Tab width:&quot;;
+localizedStrings[&quot;Tabs&quot;] = &quot;Tabs&quot;;
</ins><span class="cx"> localizedStrings[&quot;Take snapshot&quot;] = &quot;Take snapshot&quot;;
</span><span class="cx"> localizedStrings[&quot;Template Content&quot;] = &quot;Template Content&quot;;
</span><span class="cx"> localizedStrings[&quot;Text&quot;] = &quot;Text&quot;;
</span><span class="lines">@@ -804,6 +812,7 @@
</span><span class="cx"> localizedStrings[&quot;Version&quot;] = &quot;Version&quot;;
</span><span class="cx"> localizedStrings[&quot;Vertical&quot;] = &quot;Vertical&quot;;
</span><span class="cx"> localizedStrings[&quot;Visibility&quot;] = &quot;Visibility&quot;;
</span><ins>+localizedStrings[&quot;Visible&quot;] = &quot;Visible&quot;;
</ins><span class="cx"> localizedStrings[&quot;Warning: &quot;] = &quot;Warning: &quot;;
</span><span class="cx"> localizedStrings[&quot;Warnings&quot;] = &quot;Warnings&quot;;
</span><span class="cx"> localizedStrings[&quot;Watch Expressions&quot;] = &quot;Watch Expressions&quot;;
</span><span class="lines">@@ -810,6 +819,7 @@
</span><span class="cx"> localizedStrings[&quot;Web Inspector&quot;] = &quot;Web Inspector&quot;;
</span><span class="cx"> localizedStrings[&quot;Weight&quot;] = &quot;Weight&quot;;
</span><span class="cx"> localizedStrings[&quot;Whitespace&quot;] = &quot;Whitespace&quot;;
</span><ins>+localizedStrings[&quot;Whitespace Characters:&quot;] = &quot;Whitespace Characters:&quot;;
</ins><span class="cx"> localizedStrings[&quot;Width&quot;] = &quot;Width&quot;;
</span><span class="cx"> localizedStrings[&quot;With Object Properties&quot;] = &quot;With Object Properties&quot;;
</span><span class="cx"> localizedStrings[&quot;Word&quot;] = &quot;Word&quot;;
</span><span class="lines">@@ -816,6 +826,7 @@
</span><span class="cx"> localizedStrings[&quot;Worker \u2014 %s&quot;] = &quot;Worker \u2014 %s&quot;;
</span><span class="cx"> localizedStrings[&quot;Working Copy&quot;] = &quot;Working Copy&quot;;
</span><span class="cx"> localizedStrings[&quot;Wrap&quot;] = &quot;Wrap&quot;;
</span><ins>+localizedStrings[&quot;Wrap lines to editor width&quot;] = &quot;Wrap lines to editor width&quot;;
</ins><span class="cx"> localizedStrings[&quot;X&quot;] = &quot;X&quot;;
</span><span class="cx"> localizedStrings[&quot;X1&quot;] = &quot;X1&quot;;
</span><span class="cx"> localizedStrings[&quot;X2&quot;] = &quot;X2&quot;;
</span><span class="lines">@@ -829,6 +840,7 @@
</span><span class="cx"> localizedStrings[&quot;key&quot;] = &quot;key&quot;;
</span><span class="cx"> localizedStrings[&quot;line &quot;] = &quot;line &quot;;
</span><span class="cx"> localizedStrings[&quot;originally %s&quot;] = &quot;originally %s&quot;;
</span><ins>+localizedStrings[&quot;spaces&quot;] = &quot;spaces&quot;;
</ins><span class="cx"> localizedStrings[&quot;time before stopping&quot;] = &quot;time before stopping&quot;;
</span><span class="cx"> localizedStrings[&quot;times before stopping&quot;] = &quot;times before stopping&quot;;
</span><span class="cx"> localizedStrings[&quot;value&quot;] = &quot;value&quot;;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBaseMainjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -232,6 +232,26 @@
</span><span class="cx"> 
</span><span class="cx">     document.body.classList.add(this.debuggableType);
</span><span class="cx"> 
</span><ins>+    function setTabSize() {
+        document.body.style.tabSize = WebInspector.settings.tabSize.value;
+    }
+    WebInspector.settings.tabSize.addEventListener(WebInspector.Setting.Event.Changed, setTabSize);
+    setTabSize();
+
+    function setInvalidCharacterClassName() {
+        document.body.classList.toggle(&quot;show-invalid-characters&quot;, WebInspector.settings.showInvalidCharacters.value);
+    }
+    WebInspector.settings.showInvalidCharacters.addEventListener(WebInspector.Setting.Event.Changed, setInvalidCharacterClassName);
+    setInvalidCharacterClassName();
+
+    function setWhitespaceCharacterClassName() {
+        document.body.classList.toggle(&quot;show-whitespace-characters&quot;, WebInspector.settings.showWhitespaceCharacters.value);
+    }
+    WebInspector.settings.showWhitespaceCharacters.addEventListener(WebInspector.Setting.Event.Changed, setWhitespaceCharacterClassName);
+    setWhitespaceCharacterClassName();
+
+    this.settingsTabContentView = new WebInspector.SettingsTabContentView;
+
</ins><span class="cx">     // Create the user interface elements.
</span><span class="cx">     this.toolbar = new WebInspector.Toolbar(document.getElementById(&quot;toolbar&quot;), null, true);
</span><span class="cx">     this.toolbar.displayMode = WebInspector.Toolbar.DisplayMode.IconOnly;
</span><span class="lines">@@ -238,7 +258,6 @@
</span><span class="cx">     this.toolbar.sizeMode = WebInspector.Toolbar.SizeMode.Small;
</span><span class="cx"> 
</span><span class="cx">     this.tabBar = new WebInspector.TabBar(document.getElementById(&quot;tab-bar&quot;));
</span><del>-    this.tabBar.addEventListener(WebInspector.TabBar.Event.NewTabItemClicked, this._newTabItemClicked, this);
</del><span class="cx">     this.tabBar.addEventListener(WebInspector.TabBar.Event.OpenDefaultTab, this._openDefaultTab, this);
</span><span class="cx"> 
</span><span class="cx">     this._contentElement = document.getElementById(&quot;content&quot;);
</span><span class="lines">@@ -289,9 +308,6 @@
</span><span class="cx">     this.tabBrowser = new WebInspector.TabBrowser(document.getElementById(&quot;tab-browser&quot;), this.tabBar, this.navigationSidebar, this.detailsSidebar);
</span><span class="cx">     this.tabBrowser.addEventListener(WebInspector.TabBrowser.Event.SelectedTabContentViewDidChange, this._tabBrowserSelectedTabContentViewDidChange, this);
</span><span class="cx"> 
</span><del>-    this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemAdded, this._updateNewTabButtonState, this);
-    this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemRemoved, this._updateNewTabButtonState, this);
-
</del><span class="cx">     this._reloadPageKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, &quot;R&quot;, this._reloadPage.bind(this));
</span><span class="cx">     this._reloadPageIgnoringCacheKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, &quot;R&quot;, this._reloadPageIgnoringCache.bind(this));
</span><span class="cx">     this._reloadPageKeyboardShortcut.implicitlyPreventsDefault = this._reloadPageIgnoringCacheKeyboardShortcut.implicitlyPreventsDefault = false;
</span><span class="lines">@@ -406,6 +422,7 @@
</span><span class="cx">         WebInspector.NewTabContentView,
</span><span class="cx">         WebInspector.ResourcesTabContentView,
</span><span class="cx">         WebInspector.SearchTabContentView,
</span><ins>+        WebInspector.SettingsTabContentView,
</ins><span class="cx">         WebInspector.StorageTabContentView,
</span><span class="cx">         WebInspector.TimelineTabContentView,
</span><span class="cx">     ];
</span><span class="lines">@@ -447,7 +464,7 @@
</span><span class="cx">     if (!this.tabBar.selectedTabBarItem)
</span><span class="cx">         this.tabBar.selectedTabBarItem = 0;
</span><span class="cx"> 
</span><del>-    if (!this.tabBar.hasNormalTab())
</del><ins>+    if (!this.tabBar.normalTabCount)
</ins><span class="cx">         this.showNewTabTab();
</span><span class="cx"> 
</span><span class="cx">     // Listen to the events after restoring the saved tabs to avoid recursion.
</span><span class="lines">@@ -538,17 +555,6 @@
</span><span class="cx">     this._openTabsSetting.value = openTabs;
</span><span class="cx"> };
</span><span class="cx"> 
</span><del>-WebInspector._updateNewTabButtonState = function(event)
-{
-    this.tabBar.newTabItem.disabled = !this.isNewTabWithTypeAllowed(WebInspector.NewTabContentView.Type);
-};
-
-WebInspector._newTabItemClicked = function(event)
-{
-    const shouldAnimate = true;
-    this.showNewTabTab(shouldAnimate);
-};
-
</del><span class="cx"> WebInspector._openDefaultTab = function(event)
</span><span class="cx"> {
</span><span class="cx">     this.showNewTabTab();
</span><span class="lines">@@ -574,7 +580,7 @@
</span><span class="cx"> 
</span><span class="cx">     this._pendingOpenTabs = stillPendingOpenTabs;
</span><span class="cx"> 
</span><del>-    this._updateNewTabButtonState();
</del><ins>+    this.tabBrowser.tabBar.updateNewTabTabBarItemState();
</ins><span class="cx"> };
</span><span class="cx"> 
</span><span class="cx"> WebInspector.showNewTabTab = function(shouldAnimate)
</span><span class="lines">@@ -1033,6 +1039,13 @@
</span><span class="cx">     return &quot;LOCALIZED STRING NOT FOUND&quot;;
</span><span class="cx"> };
</span><span class="cx"> 
</span><ins>+WebInspector.indentString = function()
+{
+    if (WebInspector.settings.indentWithTabs.value)
+        return &quot;\t&quot;;
+    return &quot; &quot;.repeat(WebInspector.settings.indentUnit.value);
+};
+
</ins><span class="cx"> WebInspector.restoreFocusFromElement = function(element)
</span><span class="cx"> {
</span><span class="cx">     if (element &amp;&amp; element.isSelfOrAncestor(this.currentFocusElement))
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBaseSettingjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -101,3 +101,12 @@
</span><span class="cx"> WebInspector.Setting.Event = {
</span><span class="cx">     Changed: &quot;setting-changed&quot;
</span><span class="cx"> };
</span><ins>+
+WebInspector.settings = {
+    enableLineWrapping: new WebInspector.Setting(&quot;enable-line-wrapping&quot;, false),
+    indentUnit: new WebInspector.Setting(&quot;indent-unit&quot;, 4),
+    tabSize: new WebInspector.Setting(&quot;tab-size&quot;, 4),
+    indentWithTabs: new WebInspector.Setting(&quot;indent-with-tabs&quot;, false),
+    showWhitespaceCharacters: new WebInspector.Setting(&quot;show-whitespace-characters&quot;, false),
+    showInvalidCharacters: new WebInspector.Setting(&quot;show-invalid-characters&quot;, false),
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -149,6 +149,7 @@
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/SearchBar.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/SearchIcons.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/SearchSidebarPanel.css&quot;&gt;
</span><ins>+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/SettingsTabContentView.css&quot;&gt;
</ins><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/Sidebar.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/SidebarPanel.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/Slider.css&quot;&gt;
</span><span class="lines">@@ -424,8 +425,10 @@
</span><span class="cx">     &lt;script src=&quot;Views/DatabaseUserQuerySuccessView.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/DOMTreeContentView.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/DetailsSidebarPanel.js&quot;&gt;&lt;/script&gt;
</span><ins>+    &lt;script src=&quot;Views/GeneralTabBarItem.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx">     &lt;script src=&quot;Views/GeneralTreeElement.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/NavigationSidebarPanel.js&quot;&gt;&lt;/script&gt;
</span><ins>+    &lt;script src=&quot;Views/PinnedTabBarItem.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx">     &lt;script src=&quot;Views/ResourceContentView.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/TabContentView.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/TimelineDataGrid.js&quot;&gt;&lt;/script&gt;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsCSSStyleDeclarationjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -302,21 +302,20 @@
</span><span class="cx"> 
</span><span class="cx">     generateCSSRuleString()
</span><span class="cx">     {
</span><del>-        // FIXME: &lt;rdar://problem/10593948&gt; Provide a way to change the tab width in the Web Inspector
-        const indentation = &quot;    &quot;;
</del><ins>+        let indentString = WebInspector.indentString();
</ins><span class="cx">         let styleText = &quot;&quot;;
</span><span class="cx">         let mediaList = this.mediaList;
</span><span class="cx">         let mediaQueriesCount = mediaList.length;
</span><span class="cx">         for (let i = mediaQueriesCount - 1; i &gt;= 0; --i)
</span><del>-            styleText += indentation.repeat(mediaQueriesCount - i - 1) + &quot;@media &quot; + mediaList[i].text + &quot; {\n&quot;;
</del><ins>+            styleText += indentString.repeat(mediaQueriesCount - i - 1) + &quot;@media &quot; + mediaList[i].text + &quot; {\n&quot;;
</ins><span class="cx"> 
</span><del>-        styleText += indentation.repeat(mediaQueriesCount) + this.selectorText + &quot; {\n&quot;;
</del><ins>+        styleText += indentString.repeat(mediaQueriesCount) + this.selectorText + &quot; {\n&quot;;
</ins><span class="cx"> 
</span><span class="cx">         for (let property of this._properties) {
</span><span class="cx">             if (property.anonymous)
</span><span class="cx">                 continue;
</span><span class="cx"> 
</span><del>-            styleText += indentation.repeat(mediaQueriesCount + 1) + property.text.trim();
</del><ins>+            styleText += indentString.repeat(mediaQueriesCount + 1) + property.text.trim();
</ins><span class="cx"> 
</span><span class="cx">             if (!styleText.endsWith(&quot;;&quot;))
</span><span class="cx">                 styleText += &quot;;&quot;;
</span><span class="lines">@@ -325,7 +324,7 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         for (let i = mediaQueriesCount; i &gt; 0; --i)
</span><del>-            styleText += indentation.repeat(i) + &quot;}\n&quot;;
</del><ins>+            styleText += indentString.repeat(i) + &quot;}\n&quot;;
</ins><span class="cx"> 
</span><span class="cx">         styleText += &quot;}&quot;;
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTestTestjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Test/Test.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Test/Test.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Test/Test.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -101,6 +101,8 @@
</span><span class="cx"> 
</span><span class="cx"> WebInspector.UIString = (string) =&gt; string;
</span><span class="cx"> 
</span><ins>+WebInspector.indentString = () =&gt; &quot;    &quot;;
+
</ins><span class="cx"> // Add stubs that are called by the frontend API.
</span><span class="cx"> WebInspector.updateDockedState = () =&gt; {};
</span><span class="cx"> WebInspector.updateDockingAvailability = () =&gt; {};
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsApplicationCacheFrameContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -49,6 +49,8 @@
</span><span class="cx"> 
</span><span class="cx">     shown()
</span><span class="cx">     {
</span><ins>+        super.shown();
+
</ins><span class="cx">         this._maybeUpdate();
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="lines">@@ -55,6 +57,8 @@
</span><span class="cx">     closed()
</span><span class="cx">     {
</span><span class="cx">         WebInspector.applicationCacheManager.removeEventListener(null, null, this);
</span><ins>+
+        super.closed();
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     saveToCookie(cookie)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -1466,12 +1466,11 @@
</span><span class="cx"> 
</span><span class="cx">     _formattedContentFromEditor()
</span><span class="cx">     {
</span><del>-        // FIXME: &lt;rdar://problem/10593948&gt; Provide a way to change the tab width in the Web Inspector
-        var indentString = &quot;    &quot;;
-        var builder = new FormatterContentBuilder(indentString);
-        var formatter = new WebInspector.Formatter(this._codeMirror, builder);
-        var start = {line: 0, ch: 0};
-        var end = {line: this._codeMirror.lineCount() - 1};
</del><ins>+        let indentString = WebInspector.indentString();
+        let builder = new FormatterContentBuilder(indentString);
+        let formatter = new WebInspector.Formatter(this._codeMirror, builder);
+        let start = {line: 0, ch: 0};
+        let end = {line: this._codeMirror.lineCount() - 1};
</ins><span class="cx">         formatter.format(start, end);
</span><span class="cx"> 
</span><span class="cx">         return builder.formattedContent.trim();
</span><span class="lines">@@ -1543,8 +1542,8 @@
</span><span class="cx">             let selectionHead = this._codeMirror.getCursor(&quot;head&quot;);
</span><span class="cx">             let whitespaceRegex = /\s+/g;
</span><span class="cx"> 
</span><del>-            // FIXME: &lt;rdar://problem/10593948&gt; Provide a way to change the tab width in the Web Inspector
-            this._linePrefixWhitespace = &quot;    &quot;;
</del><ins>+            this._linePrefixWhitespace = WebInspector.indentString();
+
</ins><span class="cx">             let styleTextPrefixWhitespace = styleText.match(/^\s*/);
</span><span class="cx"> 
</span><span class="cx">             // If there is a match and the style text contains a newline, attempt to pull out the prefix whitespace
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsClusterContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ClusterContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ClusterContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ClusterContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -62,16 +62,22 @@
</span><span class="cx"> 
</span><span class="cx">     shown()
</span><span class="cx">     {
</span><ins>+        super.shown();
+
</ins><span class="cx">         this._contentViewContainer.shown();
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     hidden()
</span><span class="cx">     {
</span><ins>+        super.hidden();
+
</ins><span class="cx">         this._contentViewContainer.hidden();
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     closed()
</span><span class="cx">     {
</span><ins>+        super.closed();
+
</ins><span class="cx">         this._contentViewContainer.closeAllContentViews();
</span><span class="cx"> 
</span><span class="cx">         WebInspector.ContentView.removeEventListener(null, null, this);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCodeMirrorAdditionsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -357,6 +357,33 @@
</span><span class="cx">         codeMirror.on(&quot;scrollCursorIntoView&quot;, scrollCursorIntoView);
</span><span class="cx">     });
</span><span class="cx"> 
</span><ins>+    const maximumNeighboringWhitespaceCharacters = 16;
+    CodeMirror.defineOption(&quot;showWhitespaceCharacters&quot;, false, function(cm, value, old) {
+        if (!value || (old &amp;&amp; old !== CodeMirror.Init)) {
+            cm.removeOverlay(&quot;whitespace&quot;);
+            return;
+        }
+
+        cm.addOverlay({
+            name: &quot;whitespace&quot;,
+            token(stream) {
+                if (stream.peek() === &quot; &quot;) {
+                    let count = 0;
+                    while (count &lt; maximumNeighboringWhitespaceCharacters &amp;&amp; stream.peek() === &quot; &quot;) {
+                        ++count;
+                        stream.next();
+                    }
+                    return `whitespace whitespace-${count}`;
+                }
+
+                while (!stream.eol() &amp;&amp; stream.peek() !== &quot; &quot;)
+                    stream.next();
+
+                return null;
+            }
+        });
+    });
+
</ins><span class="cx">     CodeMirror.defineExtension(&quot;hasLineClass&quot;, function(line, where, className) {
</span><span class="cx">         // This matches the arguments to addLineClass and removeLineClass.
</span><span class="cx">         var classProperty = (where === &quot;text&quot; ? &quot;textClass&quot; : (where === &quot;background&quot; ? &quot;bgClass&quot; : &quot;wrapClass&quot;));
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCodeMirrorOverridescss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -91,7 +91,88 @@
</span><span class="cx">     text-indent: 0;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-/* FIXME: Add setting to show/hide invalid characters. */
-.CodeMirror .cm-invalidchar {
</del><ins>+.CodeMirror .cm-tab {
+    position: relative;
+}
+
+.show-whitespace-characters .CodeMirror .cm-tab::before {
+    position: absolute;
+    width: 90%;
+    bottom: 50%;
+    left: 5%;
+    content: &quot;&quot;;
+    border-bottom: 1px solid hsl(0, 0%, 70%);
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace::before {
+    position: absolute;
+    pointer-events: none;
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-1::before {
+    content: &quot;\00B7&quot;;
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-2::before {
+    content: &quot;\00B7\00B7&quot;;
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-3::before {
+    content: &quot;\00B7\00B7\00B7&quot;;
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-4::before {
+    content: &quot;\00B7\00B7\00B7\00B7&quot;;
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-5::before {
+    content: &quot;\00B7\00B7\00B7\00B7\00B7&quot;;
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-6::before {
+    content: &quot;\00B7\00B7\00B7\00B7\00B7\00B7&quot;;
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-7::before {
+    content: &quot;\00B7\00B7\00B7\00B7\00B7\00B7\00B7&quot;;
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-8::before {
+    content: &quot;\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7&quot;;
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-9::before {
+    content: &quot;\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7&quot;;
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-10::before {
+    content: &quot;\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7&quot;;
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-11::before {
+    content: &quot;\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7&quot;;
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-12::before {
+    content: &quot;\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7&quot;;
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-13::before {
+    content: &quot;\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7&quot;;
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-14::before {
+    content: &quot;\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7&quot;;
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-15::before {
+    content: &quot;\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7&quot;;
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-16::before {
+    content: &quot;\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7&quot;;
+}
+
+.show-invalid-characters .CodeMirror .cm-invalidchar {
</ins><span class="cx">     display: none;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsConsoleTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleTabContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleTabContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleTabContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -28,7 +28,7 @@
</span><span class="cx">     constructor(identifier)
</span><span class="cx">     {
</span><span class="cx">         let {image, title} = WebInspector.ConsoleTabContentView.tabInfo();
</span><del>-        let tabBarItem = new WebInspector.TabBarItem(image, title);
</del><ins>+        let tabBarItem = new WebInspector.GeneralTabBarItem(image, title);
</ins><span class="cx"> 
</span><span class="cx">         super(identifier || &quot;console&quot;, &quot;console&quot;, tabBarItem, null, null, true);
</span><span class="cx">     }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -83,6 +83,8 @@
</span><span class="cx"> 
</span><span class="cx">     shown()
</span><span class="cx">     {
</span><ins>+        super.shown();
+
</ins><span class="cx">         this._domTreeOutline.setVisible(true, WebInspector.isConsoleFocused());
</span><span class="cx">         this._updateCompositingBordersButtonToMatchPageSettings();
</span><span class="cx">     }
</span><span class="lines">@@ -89,6 +91,8 @@
</span><span class="cx"> 
</span><span class="cx">     hidden()
</span><span class="cx">     {
</span><ins>+        super.hidden();
+
</ins><span class="cx">         WebInspector.domTreeManager.hideDOMNodeHighlight();
</span><span class="cx">         this._domTreeOutline.setVisible(false);
</span><span class="cx">     }
</span><span class="lines">@@ -95,6 +99,8 @@
</span><span class="cx"> 
</span><span class="cx">     closed()
</span><span class="cx">     {
</span><ins>+        super.closed();
+
</ins><span class="cx">         WebInspector.showPaintRectsSetting.removeEventListener(null, null, this);
</span><span class="cx">         WebInspector.showShadowDOMSetting.removeEventListener(null, null, this);
</span><span class="cx">         WebInspector.domTreeManager.removeEventListener(null, null, this);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDatabaseContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -43,6 +43,8 @@
</span><span class="cx"> 
</span><span class="cx">     shown()
</span><span class="cx">     {
</span><ins>+        super.shown();
+
</ins><span class="cx">         // FIXME: remove once &lt;https://webkit.org/b/150741&gt; is fixed.
</span><span class="cx">         this._prompt.shown();
</span><span class="cx">     }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDebuggerTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerTabContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerTabContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerTabContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -28,7 +28,7 @@
</span><span class="cx">     constructor(identifier)
</span><span class="cx">     {
</span><span class="cx">         let {image, title} = WebInspector.DebuggerTabContentView.tabInfo();
</span><del>-        let tabBarItem = new WebInspector.TabBarItem(image, title);
</del><ins>+        let tabBarItem = new WebInspector.GeneralTabBarItem(image, title);
</ins><span class="cx">         let detailsSidebarPanels = [WebInspector.resourceDetailsSidebarPanel, WebInspector.scopeChainDetailsSidebarPanel, WebInspector.probeDetailsSidebarPanel];
</span><span class="cx"> 
</span><span class="cx">         super(identifier || &quot;debugger&quot;, &quot;debugger&quot;, tabBarItem, WebInspector.DebuggerSidebarPanel, detailsSidebarPanels);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsElementsTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ElementsTabContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ElementsTabContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ElementsTabContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -28,7 +28,7 @@
</span><span class="cx">     constructor(identifier)
</span><span class="cx">     {
</span><span class="cx">         let {image, title} = WebInspector.ElementsTabContentView.tabInfo();
</span><del>-        let tabBarItem = new WebInspector.TabBarItem(image, title);
</del><ins>+        let tabBarItem = new WebInspector.GeneralTabBarItem(image, title);
</ins><span class="cx">         let detailsSidebarPanels = [WebInspector.domNodeDetailsSidebarPanel, WebInspector.cssStyleDetailsSidebarPanel];
</span><span class="cx"> 
</span><span class="cx">         if (WebInspector.layerTreeDetailsSidebarPanel)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsGeneralTabBarItemjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTabBarItem.js (0 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTabBarItem.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTabBarItem.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -0,0 +1,91 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2016 Devin Rousso &lt;dcrousso+webkit@gmail.com&gt;. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.GeneralTabBarItem = class GeneralTabBarItem extends WebInspector.TabBarItem
+{
+    constructor(image, title, representedObject)
+    {
+        super(image, title, representedObject);
+
+        let closeButtonElement = document.createElement(&quot;div&quot;);
+        closeButtonElement.classList.add(WebInspector.TabBarItem.CloseButtonStyleClassName);
+        closeButtonElement.title = WebInspector.UIString(&quot;Click to close this tab&quot;);
+        this.element.insertBefore(closeButtonElement, this.element.firstChild);
+
+        this.element.addEventListener(&quot;contextmenu&quot;, this._handleContextMenuEvent.bind(this));
+    }
+
+    // Public
+
+    set title(title)
+    {
+        if (title) {
+            this._titleElement = document.createElement(&quot;span&quot;);
+            this._titleElement.classList.add(&quot;title&quot;);
+
+            let titleContentElement = document.createElement(&quot;span&quot;);
+            titleContentElement.classList.add(&quot;content&quot;);
+            titleContentElement.textContent = title;
+            this._titleElement.appendChild(titleContentElement);
+
+            this.element.insertBefore(this._titleElement, this.element.lastChild);
+        } else {
+            if (this._titleElement)
+                this._titleElement.remove();
+
+            this._titleElement = null;
+        }
+
+        super.title = title;
+    }
+
+    // Private
+
+    _handleContextMenuEvent(event)
+    {
+        if (!this._parentTabBar)
+            return;
+
+        let closeTab = () =&gt; {
+            this._parentTabBar.removeTabBarItem(this);
+        };
+
+        let closeOtherTabs = () =&gt; {
+            let tabBarItems = this._parentTabBar.tabBarItems;
+            for (let i = tabBarItems.length - 1; i &gt;= 0; --i) {
+                let item = tabBarItems[i];
+                if (item === this || item instanceof WebInspector.PinnedTabBarItem)
+                    continue;
+                this._parentTabBar.removeTabBarItem(item);
+            }
+        };
+
+        let hasOtherNonPinnedTabs = this._parentTabBar.tabBarItems.some((item) =&gt; item !== this &amp;&amp; !(item instanceof WebInspector.PinnedTabBarItem));
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+        contextMenu.appendItem(WebInspector.UIString(&quot;Close Tab&quot;), closeTab, this.isDefaultTab);
+        contextMenu.appendItem(WebInspector.UIString(&quot;Close Other Tabs&quot;), closeOtherTabs, !hasOtherNonPinnedTabs);
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsIndexedDatabaseObjectStoreContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -93,6 +93,8 @@
</span><span class="cx"> 
</span><span class="cx">     closed()
</span><span class="cx">     {
</span><ins>+        super.closed();
+
</ins><span class="cx">         this._reset();
</span><span class="cx">     }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsMaincss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Main.css (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Main.css        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Main.css        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -48,8 +48,6 @@
</span><span class="cx">     cursor: default;
</span><span class="cx"> 
</span><span class="cx">     -webkit-font-smoothing: subpixel-antialiased;
</span><del>-
-    tab-size: 4; /* FIXME: This should be controlled by a setting. &lt;rdar://problem/10593948&gt; */
</del><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> body:not(.mavericks) {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkGridContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -157,6 +157,8 @@
</span><span class="cx"> 
</span><span class="cx">     closed()
</span><span class="cx">     {
</span><ins>+        super.closed();
+
</ins><span class="cx">         this._dataGrid.closed();
</span><span class="cx">     }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTabContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTabContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTabContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -28,7 +28,7 @@
</span><span class="cx">     constructor(identifier)
</span><span class="cx">     {
</span><span class="cx">         let {image, title} = WebInspector.NetworkTabContentView.tabInfo();
</span><del>-        let tabBarItem = new WebInspector.TabBarItem(image, title);
</del><ins>+        let tabBarItem = new WebInspector.GeneralTabBarItem(image, title);
</ins><span class="cx">         let detailsSidebarPanels = [WebInspector.resourceDetailsSidebarPanel, WebInspector.probeDetailsSidebarPanel];
</span><span class="cx"> 
</span><span class="cx">         super(identifier || &quot;network&quot;, &quot;network&quot;, tabBarItem, WebInspector.NetworkSidebarPanel, detailsSidebarPanels);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNewTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -28,7 +28,7 @@
</span><span class="cx">     constructor(identifier)
</span><span class="cx">     {
</span><span class="cx">         let {image, title} = WebInspector.NewTabContentView.tabInfo();
</span><del>-        let tabBarItem = new WebInspector.TabBarItem(image, title);
</del><ins>+        let tabBarItem = new WebInspector.GeneralTabBarItem(image, title);
</ins><span class="cx">         tabBarItem.isDefaultTab = true;
</span><span class="cx"> 
</span><span class="cx">         super(identifier || &quot;new-tab&quot;, &quot;new-tab&quot;, tabBarItem);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsPinnedTabBarItemjsfromrev208090trunkSourceWebInspectorUIUserInterfaceViewsSettingsTabContentViewjs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/PinnedTabBarItem.js (from rev 208090, trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js) (0 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/PinnedTabBarItem.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/PinnedTabBarItem.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -0,0 +1,34 @@
</span><ins>+/*
+ * Copyright (C) 2016 Devin Rousso &lt;dcrousso+webkit@gmail.com&gt;. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.PinnedTabBarItem = class PinnedTabBarItem extends WebInspector.TabBarItem
+{
+    constructor(image, title, representedObject)
+    {
+        super(image, title, representedObject);
+
+        this.element.classList.add(&quot;pinned&quot;);
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResourceContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -76,6 +76,8 @@
</span><span class="cx"> 
</span><span class="cx">     closed()
</span><span class="cx">     {
</span><ins>+        super.closed();
+
</ins><span class="cx">         if (!this.managesOwnIssues)
</span><span class="cx">             WebInspector.issueManager.removeEventListener(null, null, this);
</span><span class="cx">     }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResourcesTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourcesTabContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourcesTabContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourcesTabContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -28,7 +28,7 @@
</span><span class="cx">     constructor(identifier)
</span><span class="cx">     {
</span><span class="cx">         let {image, title} = WebInspector.ResourcesTabContentView.tabInfo();
</span><del>-        let tabBarItem = new WebInspector.TabBarItem(image, title);
</del><ins>+        let tabBarItem = new WebInspector.GeneralTabBarItem(image, title);
</ins><span class="cx">         let detailsSidebarPanels = [WebInspector.resourceDetailsSidebarPanel, WebInspector.probeDetailsSidebarPanel];
</span><span class="cx"> 
</span><span class="cx">         // FIXME: Until ContentFlows are moved to the Elements tab, these details sidebar panels need to be included.
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsScriptContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScriptContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ScriptContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScriptContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -107,16 +107,22 @@
</span><span class="cx"> 
</span><span class="cx">     shown()
</span><span class="cx">     {
</span><ins>+        super.shown();
+
</ins><span class="cx">         this._textEditor.shown();
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     hidden()
</span><span class="cx">     {
</span><ins>+        super.hidden();
+
</ins><span class="cx">         this._textEditor.hidden();
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     closed()
</span><span class="cx">     {
</span><ins>+        super.closed();
+
</ins><span class="cx">         WebInspector.showJavaScriptTypeInformationSetting.removeEventListener(null, null, this);
</span><span class="cx"> 
</span><span class="cx">         this._textEditor.close();
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSearchTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SearchTabContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SearchTabContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SearchTabContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -28,7 +28,7 @@
</span><span class="cx">     constructor(identifier)
</span><span class="cx">     {
</span><span class="cx">         let {image, title} = WebInspector.SearchTabContentView.tabInfo();
</span><del>-        let tabBarItem = new WebInspector.TabBarItem(image, title);
</del><ins>+        let tabBarItem = new WebInspector.GeneralTabBarItem(image, title);
</ins><span class="cx">         let detailsSidebarPanels = [WebInspector.resourceDetailsSidebarPanel, WebInspector.probeDetailsSidebarPanel,
</span><span class="cx">             WebInspector.domNodeDetailsSidebarPanel, WebInspector.cssStyleDetailsSidebarPanel];
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSettingsTabContentViewcssfromrev208090trunkSourceWebInspectorUIUserInterfaceViewsSettingsTabContentViewjs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css (from rev 208090, trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js) (0 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -0,0 +1,62 @@
</span><ins>+/*
+ * Copyright (C) 2016 Devin Rousso &lt;dcrousso+webkit@gmail.com&gt;. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.settings {
+    display: flex;
+    flex-direction: column;
+    font-weight: lighter;
+}
+
+.content-view.settings &gt; .header {
+    margin: 70px auto 40px;
+    text-align: center;
+    font-size: 48px;
+}
+
+.content-view.settings &gt; .setting-container {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    font-size: 14px;
+}
+
+.content-view.settings &gt; .setting-container &gt; .setting-name {
+    width: 50%;
+    margin-right: 2px;
+    text-align: right;
+}
+
+.content-view.settings &gt; .setting-container &gt; .setting-value-controller {
+    display: flex;
+    align-items: center;
+    width: 50%;
+    margin-left: 2px;
+}
+
+.content-view.settings &gt; .setting-container &gt; .setting-value-controller input[type=&quot;number&quot;] {
+    max-width: 50px;
+    margin: 0 5px;
+    text-align: right;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSettingsTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -1,5 +1,6 @@
</span><span class="cx"> /*
</span><span class="cx">  * Copyright (C) 2015 Apple Inc. All rights reserved.
</span><ins>+ * Copyright (C) 2016 Devin Rousso &lt;dcrousso+webkit@gmail.com&gt;. 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">@@ -27,17 +28,27 @@
</span><span class="cx"> {
</span><span class="cx">     constructor(identifier)
</span><span class="cx">     {
</span><del>-        var tabBarItem = new WebInspector.TabBarItem(&quot;Images/Gear.svg&quot;, WebInspector.UIString(&quot;Settings&quot;), true);
</del><ins>+        let tabBarItem = new WebInspector.PinnedTabBarItem(&quot;Images/Gear.svg&quot;, WebInspector.UIString(&quot;Open Settings&quot;));
</ins><span class="cx"> 
</span><span class="cx">         super(identifier || &quot;settings&quot;, &quot;settings&quot;, tabBarItem);
</span><ins>+
+        // Ensures that the Settings tab is displayable from a pinned tab bar item.
+        tabBarItem.representedObject = this;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    static isTabAllowed()
</del><ins>+    static tabInfo()
</ins><span class="cx">     {
</span><del>-        // FIXME (149284): This tab isn't ready to be shown yet.
-        return false;
</del><ins>+        return {
+            image: &quot;Images/Gear.svg&quot;,
+            title: WebInspector.UIString(&quot;Settings&quot;),
+        };
</ins><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    static isEphemeral()
+    {
+        return true;
+    }
+
</ins><span class="cx">     static shouldSaveTab()
</span><span class="cx">     {
</span><span class="cx">         return false;
</span><span class="lines">@@ -49,6 +60,95 @@
</span><span class="cx">     {
</span><span class="cx">         return WebInspector.SettingsTabContentView.Type;
</span><span class="cx">     }
</span><ins>+
+    initialLayout()
+    {
+        let header = this.element.createChild(&quot;div&quot;, &quot;header&quot;);
+        header.textContent = WebInspector.UIString(&quot;Settings&quot;);
+
+        let createContainer = (title, createValueController) =&gt; {
+            let container = this.element.createChild(&quot;div&quot;, &quot;setting-container&quot;);
+
+            let titleContainer = container.createChild(&quot;div&quot;, &quot;setting-name&quot;);
+            titleContainer.textContent = title;
+
+            let valueControllerContainer = container.createChild(&quot;div&quot;, &quot;setting-value-controller&quot;);
+            if (typeof createValueController === &quot;function&quot;)
+                createValueController(valueControllerContainer);
+        };
+
+        let createCheckbox = (setting) =&gt; {
+            let checkbox = document.createElement(&quot;input&quot;);
+            checkbox.type = &quot;checkbox&quot;;
+            checkbox.checked = setting.value;
+            checkbox.addEventListener(&quot;change&quot;, (event) =&gt; {
+                setting.value = checkbox.checked;
+            });
+            return checkbox;
+        };
+
+        createContainer(WebInspector.UIString(&quot;Prefer indent using:&quot;), (valueControllerContainer) =&gt; {
+            let select = valueControllerContainer.createChild(&quot;select&quot;);
+            select.addEventListener(&quot;change&quot;, (event) =&gt; {
+                WebInspector.settings.indentWithTabs.value = select.value === &quot;tabs&quot;;
+            });
+
+            let tabsOption = select.createChild(&quot;option&quot;);
+            tabsOption.value = &quot;tabs&quot;;
+            tabsOption.textContent = WebInspector.UIString(&quot;Tabs&quot;);
+            tabsOption.selected = WebInspector.settings.indentWithTabs.value;
+
+            let spacesOption = select.createChild(&quot;option&quot;);
+            spacesOption.value = &quot;spaces&quot;;
+            spacesOption.textContent = WebInspector.UIString(&quot;Spaces&quot;);
+            spacesOption.selected = !WebInspector.settings.indentWithTabs.value;
+        });
+
+        createContainer(WebInspector.UIString(&quot;Tab width:&quot;), (valueControllerContainer) =&gt; {
+            let input = valueControllerContainer.createChild(&quot;input&quot;);
+            input.type = &quot;number&quot;;
+            input.min = 1;
+            input.value = WebInspector.settings.tabSize.value;
+            input.addEventListener(&quot;change&quot;, (event) =&gt; {
+                WebInspector.settings.tabSize.value = parseInt(input.value) || 4;
+            });
+
+            valueControllerContainer.append(WebInspector.UIString(&quot;spaces&quot;));
+        });
+
+        createContainer(WebInspector.UIString(&quot;Indent width:&quot;), (valueControllerContainer) =&gt; {
+            let input = valueControllerContainer.createChild(&quot;input&quot;);
+            input.type = &quot;number&quot;;
+            input.min = 1;
+            input.value = WebInspector.settings.indentUnit.value;
+            input.addEventListener(&quot;change&quot;, (event) =&gt; {
+                WebInspector.settings.indentUnit.value = parseInt(input.value) || 4;
+            });
+
+            valueControllerContainer.append(WebInspector.UIString(&quot;spaces&quot;));
+        });
+
+        createContainer(WebInspector.UIString(&quot;Line wrapping:&quot;), (valueControllerContainer) =&gt; {
+            let checkbox = createCheckbox(WebInspector.settings.enableLineWrapping);
+            valueControllerContainer.appendChild(checkbox);
+
+            valueControllerContainer.append(WebInspector.UIString(&quot;Wrap lines to editor width&quot;));
+        });
+
+        createContainer(WebInspector.UIString(&quot;Whitespace Characters:&quot;), (valueControllerContainer) =&gt; {
+            let checkbox = createCheckbox(WebInspector.settings.showWhitespaceCharacters);
+            valueControllerContainer.appendChild(checkbox);
+
+            valueControllerContainer.append(WebInspector.UIString(&quot;Visible&quot;));
+        });
+
+        createContainer(WebInspector.UIString(&quot;Invalid Characters:&quot;), (valueControllerContainer) =&gt; {
+            let checkbox = createCheckbox(WebInspector.settings.showInvalidCharacters);
+            valueControllerContainer.appendChild(checkbox);
+
+            valueControllerContainer.append(WebInspector.UIString(&quot;Visible&quot;));
+        });
+    }
</ins><span class="cx"> };
</span><span class="cx"> 
</span><span class="cx"> WebInspector.SettingsTabContentView.Type = &quot;settings&quot;;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSourceCodeTextEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -144,6 +144,8 @@
</span><span class="cx"> 
</span><span class="cx">     close()
</span><span class="cx">     {
</span><ins>+        super.close();
+
</ins><span class="cx">         if (this._supportsDebugging) {
</span><span class="cx">             WebInspector.Breakpoint.removeEventListener(null, null, this);
</span><span class="cx">             WebInspector.debuggerManager.removeEventListener(null, null, this);
</span><span class="lines">@@ -1646,10 +1648,11 @@
</span><span class="cx">                 this._popover.update();
</span><span class="cx">             });
</span><span class="cx"> 
</span><del>-            // FIXME: &lt;rdar://problem/10593948&gt; Provide a way to change the tab width in the Web Inspector
</del><span class="cx">             const isModule = false;
</span><ins>+            const indentString = WebInspector.indentString();
+            const includeSourceMapData = false;
</ins><span class="cx">             let workerProxy = WebInspector.FormatterWorkerProxy.singleton();
</span><del>-            workerProxy.formatJavaScript(data.description, isModule, &quot;    &quot;, false, ({formattedText}) =&gt; {
</del><ins>+            workerProxy.formatJavaScript(data.description, isModule, indentString, includeSourceMapData, ({formattedText}) =&gt; {
</ins><span class="cx">                 codeMirror.setValue(formattedText || data.description);
</span><span class="cx">             });
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsStorageTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/StorageTabContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/StorageTabContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/StorageTabContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -28,7 +28,7 @@
</span><span class="cx">     constructor(identifier)
</span><span class="cx">     {
</span><span class="cx">         let {image, title} = WebInspector.StorageTabContentView.tabInfo();
</span><del>-        let tabBarItem = new WebInspector.TabBarItem(image, title);
</del><ins>+        let tabBarItem = new WebInspector.GeneralTabBarItem(image, title);
</ins><span class="cx">         let detailsSidebarPanels = [WebInspector.applicationCacheDetailsSidebarPanel, WebInspector.indexedDatabaseDetailsSidebarPanel];
</span><span class="cx"> 
</span><span class="cx">         super(identifier || &quot;storage&quot;, &quot;storage&quot;, tabBarItem, WebInspector.StorageSidebarPanel, detailsSidebarPanels);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTabBarcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -119,8 +119,7 @@
</span><span class="cx">     border-top-color: hsl(0, 0%, 68%);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.tab-bar:not(.animating) &gt; .item:not(.selected, .disabled):hover,
-.tab-bar &gt; .item.new-tab-button:not(.disabled):hover {
</del><ins>+.tab-bar:not(.animating) &gt; .item:not(.selected, .disabled):hover {
</ins><span class="cx">     background-position: 0 100%;
</span><span class="cx">     border-top-color: hsl(0, 0%, 59%);
</span><span class="cx">     border-left-color: hsl(0, 0%, 59%);
</span><span class="lines">@@ -191,7 +190,7 @@
</span><span class="cx">     flex: 1;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.tab-bar &gt; .item &gt; .flex-space:last-child {
</del><ins>+.tab-bar &gt; .item:not(.pinned) &gt; .flex-space:last-child {
</ins><span class="cx">     margin-right: 16px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="lines">@@ -207,6 +206,13 @@
</span><span class="cx">     -webkit-user-drag: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.tab-bar &gt; .item.pinned &gt; .icon {
+    width: 15px;
+    height: 15px;
+    min-width: 15px;
+    min-height: 15px;
+}
+
</ins><span class="cx"> .tab-bar &gt; .item.selected &gt; .icon {
</span><span class="cx">     opacity: 0.7;
</span><span class="cx"> }
</span><span class="lines">@@ -215,15 +221,7 @@
</span><span class="cx">     opacity: 0.35;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.tab-bar &gt; .item.new-tab-button &gt; .icon {
-    width: 15px;
-    height: 15px;
-    min-width: 15px;
-    min-height: 15px;
-}
-
-.tab-bar:not(.animating) &gt; .item:not(.selected, .disabled):hover &gt; .icon,
-.tab-bar &gt; .item.new-tab-button:not(.disabled):hover &gt; .icon {
</del><ins>+.tab-bar:not(.animating) &gt; .item:not(.selected, .disabled):hover &gt; .icon {
</ins><span class="cx">     opacity: 0.6;
</span><span class="cx"> }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTabBarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -31,53 +31,35 @@
</span><span class="cx"> 
</span><span class="cx">         this.element.classList.add(&quot;tab-bar&quot;);
</span><span class="cx">         this.element.setAttribute(&quot;role&quot;, &quot;tablist&quot;);
</span><del>-
-        var topBorderElement = document.createElement(&quot;div&quot;);
-        topBorderElement.classList.add(&quot;top-border&quot;);
-        this.element.appendChild(topBorderElement);
-
</del><span class="cx">         this.element.addEventListener(&quot;mousedown&quot;, this._handleMouseDown.bind(this));
</span><span class="cx">         this.element.addEventListener(&quot;click&quot;, this._handleClick.bind(this));
</span><span class="cx">         this.element.addEventListener(&quot;mouseleave&quot;, this._handleMouseLeave.bind(this));
</span><span class="cx"> 
</span><ins>+        this.element.createChild(&quot;div&quot;, &quot;top-border&quot;);
+
</ins><span class="cx">         this._tabBarItems = [];
</span><span class="cx"> 
</span><span class="cx">         if (tabBarItems) {
</span><del>-            for (var tabBarItem in tabBarItems)
</del><ins>+            for (let tabBarItem in tabBarItems)
</ins><span class="cx">                 this.addTabBarItem(tabBarItem);
</span><span class="cx">         }
</span><ins>+
+        this.addTabBarItem(WebInspector.settingsTabContentView.tabBarItem, true);
+
+        this._newTabTabBarItem = new WebInspector.PinnedTabBarItem(&quot;Images/NewTabPlus.svg&quot;, WebInspector.UIString(&quot;Create a new tab&quot;));
+        this._newTabTabBarItem.element.addEventListener(&quot;mouseenter&quot;, this._handleNewTabMouseEnter.bind(this));
+        this._newTabTabBarItem.element.addEventListener(&quot;click&quot;, this._handleNewTabClick.bind(this));
+        this.addTabBarItem(this._newTabTabBarItem, true);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Public
</span><span class="cx"> 
</span><del>-    get newTabItem()
-    {
-        return this._newTabItem || null;
-    }
</del><ins>+    get newTabTabBarItem() { return this._newTabTabBarItem; }
</ins><span class="cx"> 
</span><del>-    set newTabItem(newTabItem)
</del><ins>+    updateNewTabTabBarItemState()
</ins><span class="cx">     {
</span><del>-        if (!this._handleNewTabClickListener)
-            this._handleNewTabClickListener = this._handleNewTabClick.bind(this);
-
-        if (!this._handleNewTabMouseEnterListener)
-            this._handleNewTabMouseEnterListener = this._handleNewTabMouseEnter.bind(this);
-
-        if (this._newTabItem) {
-            this._newTabItem.element.classList.remove(&quot;new-tab-button&quot;);
-            this._newTabItem.element.removeEventListener(&quot;click&quot;, this._handleNewTabClickListener);
-            this._newTabItem.element.removeEventListener(&quot;mouseenter&quot;, this._handleNewTabMouseEnterListener);
-            this.removeTabBarItem(this._newTabItem, true);
-        }
-
-        if (newTabItem) {
-            newTabItem.element.classList.add(&quot;new-tab-button&quot;);
-            newTabItem.element.addEventListener(&quot;click&quot;, this._handleNewTabClickListener);
-            newTabItem.element.addEventListener(&quot;mouseenter&quot;, this._handleNewTabMouseEnterListener);
-            this.addTabBarItem(newTabItem, true);
-        }
-
-        this._newTabItem = newTabItem || null;
</del><ins>+        let newTabExists = !WebInspector.isNewTabWithTypeAllowed(WebInspector.NewTabContentView.Type);
+        this._newTabTabBarItem.disabled = newTabExists;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     addTabBarItem(tabBarItem, doNotAnimate)
</span><span class="lines">@@ -107,8 +89,7 @@
</span><span class="cx"> 
</span><span class="cx">         tabBarItem.parentTabBar = this;
</span><span class="cx"> 
</span><del>-        var lastIndex = this._newTabItem ? this._tabBarItems.length - 1 : this._tabBarItems.length;
-        index = Math.max(0, Math.min(index, lastIndex));
</del><ins>+        index = Number.constrain(index, 0, this.normalTabCount);
</ins><span class="cx"> 
</span><span class="cx">         if (this.element.classList.contains(&quot;animating&quot;)) {
</span><span class="cx">             requestAnimationFrame(removeStyles.bind(this));
</span><span class="lines">@@ -122,9 +103,12 @@
</span><span class="cx">         this._tabBarItems.splice(index, 0, tabBarItem);
</span><span class="cx"> 
</span><span class="cx">         var nextSibling = this._tabBarItems[index + 1];
</span><del>-        var nextSiblingElement = nextSibling ? nextSibling.element : (this._newTabItem ? this._newTabItem.element : null);
</del><ins>+        let nextSiblingElement = nextSibling ? nextSibling.element : this._tabBarItems.lastValue.element;
</ins><span class="cx"> 
</span><del>-        this.element.insertBefore(tabBarItem.element, nextSiblingElement);
</del><ins>+        if (this.element.isAncestor(nextSiblingElement))
+            this.element.insertBefore(tabBarItem.element, nextSiblingElement);
+        else
+            this.element.appendChild(tabBarItem.element);
</ins><span class="cx"> 
</span><span class="cx">         this.element.classList.toggle(&quot;single-tab&quot;, !this._hasMoreThanOneNormalTab());
</span><span class="cx"> 
</span><span class="lines">@@ -178,6 +162,9 @@
</span><span class="cx">         } else
</span><span class="cx">             this.needsLayout();
</span><span class="cx"> 
</span><ins>+        if (!(tabBarItem instanceof WebInspector.PinnedTabBarItem))
+            this.updateNewTabTabBarItemState();
+
</ins><span class="cx">         this.dispatchEventToListeners(WebInspector.TabBar.Event.TabBarItemAdded, {tabBarItem});
</span><span class="cx"> 
</span><span class="cx">         return tabBarItem;
</span><span class="lines">@@ -185,19 +172,16 @@
</span><span class="cx"> 
</span><span class="cx">     removeTabBarItem(tabBarItemOrIndex, doNotAnimate, doNotExpand)
</span><span class="cx">     {
</span><del>-        var tabBarItem = this._findTabBarItem(tabBarItemOrIndex);
-        if (!tabBarItem)
</del><ins>+        let tabBarItem = this._findTabBarItem(tabBarItemOrIndex);
+        if (!tabBarItem || tabBarItem instanceof WebInspector.PinnedTabBarItem)
</ins><span class="cx">             return null;
</span><span class="cx"> 
</span><span class="cx">         tabBarItem.parentTabBar = null;
</span><span class="cx"> 
</span><del>-        if (tabBarItem === this._newTabItem)
-            this.newTabItem = null;
-
</del><span class="cx">         if (this._selectedTabBarItem === tabBarItem) {
</span><span class="cx">             var index = this._tabBarItems.indexOf(tabBarItem);
</span><span class="cx">             var nextTabBarItem = this._tabBarItems[index + 1];
</span><del>-            if (!nextTabBarItem || nextTabBarItem.pinned)
</del><ins>+            if (!nextTabBarItem || nextTabBarItem instanceof WebInspector.PinnedTabBarItem)
</ins><span class="cx">                 nextTabBarItem = this._tabBarItems[index - 1];
</span><span class="cx"> 
</span><span class="cx">             this.selectedTabBarItem = nextTabBarItem;
</span><span class="lines">@@ -212,7 +196,8 @@
</span><span class="cx">         if (!doNotAnimate)
</span><span class="cx">             beforeTabSizesAndPositions = this._recordTabBarItemSizesAndPositions();
</span><span class="cx"> 
</span><del>-        var wasLastNormalTab = this._tabBarItems.indexOf(tabBarItem) === (this._newTabItem ? this._tabBarItems.length - 2 : this._tabBarItems.length - 1);
</del><ins>+        // Subtract 1 from normalTabCount since arrays begin indexing at 0.
+        let wasLastNormalTab = this._tabBarItems.indexOf(tabBarItem) === this.normalTabCount - 1;
</ins><span class="cx"> 
</span><span class="cx">         this._tabBarItems.remove(tabBarItem);
</span><span class="cx">         tabBarItem.element.remove();
</span><span class="lines">@@ -220,7 +205,7 @@
</span><span class="cx">         var hasMoreThanOneNormalTab = this._hasMoreThanOneNormalTab();
</span><span class="cx">         this.element.classList.toggle(&quot;single-tab&quot;, !hasMoreThanOneNormalTab);
</span><span class="cx"> 
</span><del>-        const shouldOpenDefaultTab = !tabBarItem.isDefaultTab &amp;&amp; !this.hasNormalTab();
</del><ins>+        const shouldOpenDefaultTab = !tabBarItem.isDefaultTab &amp;&amp; !this.normalTabCount;
</ins><span class="cx">         if (shouldOpenDefaultTab)
</span><span class="cx">             doNotAnimate = true;
</span><span class="cx"> 
</span><span class="lines">@@ -231,6 +216,8 @@
</span><span class="cx">             } else
</span><span class="cx">                 this.needsLayout();
</span><span class="cx"> 
</span><ins>+            this.updateNewTabTabBarItemState();
+
</ins><span class="cx">             this.dispatchEventToListeners(WebInspector.TabBar.Event.TabBarItemRemoved, {tabBarItem});
</span><span class="cx"> 
</span><span class="cx">             if (shouldOpenDefaultTab)
</span><span class="lines">@@ -250,7 +237,7 @@
</span><span class="cx">             for (var currentTabBarItem of this._tabBarItems) {
</span><span class="cx">                 var sizeAndPosition = beforeTabSizesAndPositions.get(currentTabBarItem);
</span><span class="cx"> 
</span><del>-                if (!currentTabBarItem.pinned) {
</del><ins>+                if (!(currentTabBarItem instanceof WebInspector.PinnedTabBarItem)) {
</ins><span class="cx">                     currentTabBarItem.element.style.left = left + &quot;px&quot;;
</span><span class="cx">                     left += sizeAndPosition.width;
</span><span class="cx">                     lastNormalTabBarItem = currentTabBarItem;
</span><span class="lines">@@ -295,6 +282,8 @@
</span><span class="cx">         } else
</span><span class="cx">             this.needsLayout();
</span><span class="cx"> 
</span><ins>+        this.updateNewTabTabBarItemState();
+
</ins><span class="cx">         this.dispatchEventToListeners(WebInspector.TabBar.Event.TabBarItemRemoved, {tabBarItem});
</span><span class="cx"> 
</span><span class="cx">         if (shouldOpenDefaultTab)
</span><span class="lines">@@ -316,7 +305,7 @@
</span><span class="cx">             else
</span><span class="cx">                 newIndex--;
</span><span class="cx"> 
</span><del>-            if (!this._tabBarItems[newIndex].pinned)
</del><ins>+            if (!(this._tabBarItems[newIndex] instanceof WebInspector.PinnedTabBarItem))
</ins><span class="cx">                 break;
</span><span class="cx">         } while (newIndex !== startIndex);
</span><span class="cx"> 
</span><span class="lines">@@ -339,7 +328,7 @@
</span><span class="cx">             else
</span><span class="cx">                 newIndex++;
</span><span class="cx"> 
</span><del>-            if (!this._tabBarItems[newIndex].pinned)
</del><ins>+            if (!(this._tabBarItems[newIndex] instanceof WebInspector.PinnedTabBarItem))
</ins><span class="cx">                 break;
</span><span class="cx">         } while (newIndex !== startIndex);
</span><span class="cx"> 
</span><span class="lines">@@ -356,9 +345,11 @@
</span><span class="cx"> 
</span><span class="cx">     set selectedTabBarItem(tabBarItemOrIndex)
</span><span class="cx">     {
</span><del>-        var tabBarItem = this._findTabBarItem(tabBarItemOrIndex);
-        if (tabBarItem === this._newTabItem)
-            tabBarItem = this._tabBarItems[this._tabBarItems.length - 2];
</del><ins>+        let tabBarItem = this._findTabBarItem(tabBarItemOrIndex);
+        if (tabBarItem === this._newTabTabBarItem) {
+            // Get the item before the New-Tab item since it is not selectable.
+            tabBarItem = this._tabBarItems[this.normalTabCount - 1];
+        }
</ins><span class="cx"> 
</span><span class="cx">         if (this._selectedTabBarItem === tabBarItem)
</span><span class="cx">             return;
</span><span class="lines">@@ -379,9 +370,9 @@
</span><span class="cx">         return this._tabBarItems;
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    hasNormalTab()
</del><ins>+    get normalTabCount()
</ins><span class="cx">     {
</span><del>-        return this._tabBarItems.some((tab) =&gt; !tab.pinned);
</del><ins>+        return this._tabBarItems.filter((item) =&gt; !(item instanceof WebInspector.PinnedTabBarItem)).length;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Protected
</span><span class="lines">@@ -396,8 +387,9 @@
</span><span class="cx"> 
</span><span class="cx">         let firstNormalTabItem = null;
</span><span class="cx">         for (let tabItem of this._tabBarItems) {
</span><del>-            if (tabItem.pinned)
</del><ins>+            if (tabItem instanceof WebInspector.PinnedTabBarItem)
</ins><span class="cx">                 continue;
</span><ins>+
</ins><span class="cx">             firstNormalTabItem = tabItem;
</span><span class="cx">             break;
</span><span class="cx">         }
</span><span class="lines">@@ -433,10 +425,11 @@
</span><span class="cx"> 
</span><span class="cx">     _hasMoreThanOneNormalTab()
</span><span class="cx">     {
</span><del>-        var normalTabCount = 0;
-        for (var tabBarItem of this._tabBarItems) {
-            if (tabBarItem.pinned)
</del><ins>+        let normalTabCount = 0;
+        for (let tabBarItem of this._tabBarItems) {
+            if (tabBarItem instanceof WebInspector.PinnedTabBarItem)
</ins><span class="cx">                 continue;
</span><ins>+
</ins><span class="cx">             ++normalTabCount;
</span><span class="cx">             if (normalTabCount &gt;= 2)
</span><span class="cx">                 return true;
</span><span class="lines">@@ -539,11 +532,11 @@
</span><span class="cx">         if (event.button !== 0 || event.ctrlKey)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        var itemElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.TabBarItem.StyleClassName);
</del><ins>+        let itemElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.TabBarItem.StyleClassName);
</ins><span class="cx">         if (!itemElement)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        var tabBarItem = itemElement[WebInspector.TabBarItem.ElementReferenceSymbol];
</del><ins>+        let tabBarItem = itemElement[WebInspector.TabBarItem.ElementReferenceSymbol];
</ins><span class="cx">         if (!tabBarItem)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><span class="lines">@@ -550,22 +543,23 @@
</span><span class="cx">         if (tabBarItem.disabled)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        if (tabBarItem === this._newTabItem)
</del><ins>+        if (tabBarItem === this._newTabTabBarItem)
</ins><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        var closeButtonElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.TabBarItem.CloseButtonStyleClassName);
</del><ins>+        let closeButtonElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.TabBarItem.CloseButtonStyleClassName);
</ins><span class="cx">         if (closeButtonElement)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><span class="cx">         this.selectedTabBarItem = tabBarItem;
</span><span class="cx"> 
</span><del>-        if (tabBarItem.pinned || !this._hasMoreThanOneNormalTab())
</del><ins>+        if (tabBarItem instanceof WebInspector.PinnedTabBarItem || !this._hasMoreThanOneNormalTab())
</ins><span class="cx">             return;
</span><span class="cx"> 
</span><span class="cx">         this._firstNormalTabItemIndex = 0;
</span><del>-        for (var i = 0; i &lt; this._tabBarItems.length; ++i) {
-            if (this._tabBarItems[i].pinned)
</del><ins>+        for (let i = 0; i &lt; this._tabBarItems.length; ++i) {
+            if (this._tabBarItems[i] instanceof WebInspector.PinnedTabBarItem)
</ins><span class="cx">                 continue;
</span><ins>+
</ins><span class="cx">             this._firstNormalTabItemIndex = i;
</span><span class="cx">             break;
</span><span class="cx">         }
</span><span class="lines">@@ -641,7 +635,7 @@
</span><span class="cx">         var currentIndex = this._tabBarItems.indexOf(this._selectedTabBarItem);
</span><span class="cx">         var newIndex = currentIndex;
</span><span class="cx"> 
</span><del>-        for (var tabBarItem of this._tabBarItems) {
</del><ins>+        for (let tabBarItem of this._tabBarItems) {
</ins><span class="cx">             if (tabBarItem === this._selectedTabBarItem)
</span><span class="cx">                 continue;
</span><span class="cx"> 
</span><span class="lines">@@ -654,8 +648,8 @@
</span><span class="cx">             break;
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        newIndex = Math.max(this._firstNormalTabItemIndex, newIndex);
-        newIndex = Math.min(this._newTabItem ? this._tabBarItems.length - 2 : this._tabBarItems.length - 1, newIndex);
</del><ins>+        // Subtract 1 from normalTabCount since arrays begin indexing at 0.
+        newIndex = Number.constrain(newIndex, this._firstNormalTabItemIndex, this.normalTabCount - 1);
</ins><span class="cx"> 
</span><span class="cx">         if (currentIndex === newIndex)
</span><span class="cx">             return;
</span><span class="lines">@@ -663,16 +657,16 @@
</span><span class="cx">         this._tabBarItems.splice(currentIndex, 1);
</span><span class="cx">         this._tabBarItems.splice(newIndex, 0, this._selectedTabBarItem);
</span><span class="cx"> 
</span><del>-        var nextSibling = this._tabBarItems[newIndex + 1];
-        var nextSiblingElement = nextSibling ? nextSibling.element : (this._newTabItem ? this._newTabItem.element : null);
</del><ins>+        let nextSibling = this._tabBarItems[newIndex + 1];
+        let nextSiblingElement = nextSibling ? nextSibling.element : this._newTabTabBarItem.element;
</ins><span class="cx"> 
</span><span class="cx">         this.element.insertBefore(this._selectedTabBarItem.element, nextSiblingElement);
</span><span class="cx"> 
</span><span class="cx">         // FIXME: Animate the tabs that move to make room for the selected tab. This was causing me trouble when I tried.
</span><span class="cx"> 
</span><del>-        var left = 0;
-        for (var tabBarItem of this._tabBarItems) {
-            if (tabBarItem !== this._selectedTabBarItem &amp;&amp; tabBarItem !== this._newTabItem &amp;&amp; parseFloat(tabBarItem.element.style.left) !== left)
</del><ins>+        let left = 0;
+        for (let tabBarItem of this._tabBarItems) {
+            if (tabBarItem !== this._selectedTabBarItem &amp;&amp; tabBarItem !== this._newTabTabBarItem &amp;&amp; parseFloat(tabBarItem.element.style.left) !== left)
</ins><span class="cx">                 tabBarItem.element.style.left = left + &quot;px&quot;;
</span><span class="cx">             left += parseFloat(tabBarItem.element.style.width);
</span><span class="cx">         }
</span><span class="lines">@@ -723,7 +717,7 @@
</span><span class="cx">         // Check if the mouse really did leave the element by checking the bounds.
</span><span class="cx">         // FIXME: Is this a WebKit bug or correct behavior?
</span><span class="cx">         const barRect = this.element.getBoundingClientRect();
</span><del>-        const newTabItemRect = this._newTabItem ? this._newTabItem.element.getBoundingClientRect() : null;
</del><ins>+        const newTabItemRect = this._newTabTabBarItem.element.getBoundingClientRect();
</ins><span class="cx">         if (event.pageY &gt; barRect.top &amp;&amp; event.pageY &lt; barRect.bottom &amp;&amp; event.pageX &gt; barRect.left &amp;&amp; event.pageX &lt; (newTabItemRect ? newTabItemRect.right : barRect.right))
</span><span class="cx">             return;
</span><span class="cx"> 
</span><span class="lines">@@ -732,9 +726,8 @@
</span><span class="cx"> 
</span><span class="cx">     _handleNewTabClick(event)
</span><span class="cx">     {
</span><del>-        if (this._newTabItem.disabled)
-            return;
-        this.dispatchEventToListeners(WebInspector.TabBar.Event.NewTabItemClicked);
</del><ins>+        const shouldAnimate = true;
+        WebInspector.showNewTabTab(shouldAnimate);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _handleNewTabMouseEnter(event)
</span><span class="lines">@@ -751,6 +744,5 @@
</span><span class="cx">     TabBarItemAdded: &quot;tab-bar-tab-bar-item-added&quot;,
</span><span class="cx">     TabBarItemRemoved: &quot;tab-bar-tab-bar-item-removed&quot;,
</span><span class="cx">     TabBarItemsReordered: &quot;tab-bar-tab-bar-items-reordered&quot;,
</span><del>-    NewTabItemClicked: &quot;tab-bar-new-tab-item-clicked&quot;,
</del><span class="cx">     OpenDefaultTab: &quot;tab-bar-open-default-tab&quot;
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTabBarItemjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -1,5 +1,6 @@
</span><span class="cx"> /*
</span><span class="cx">  * Copyright (C) 2015 Apple Inc. All rights reserved.
</span><ins>+ * Copyright (C) 2016 Devin Rousso &lt;dcrousso+webkit@gmail.com&gt;. 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">@@ -25,7 +26,7 @@
</span><span class="cx"> 
</span><span class="cx"> WebInspector.TabBarItem = class TabBarItem extends WebInspector.Object
</span><span class="cx"> {
</span><del>-    constructor(image, title, pinned, representedObject)
</del><ins>+    constructor(image, title, representedObject)
</ins><span class="cx">     {
</span><span class="cx">         super();
</span><span class="cx"> 
</span><span class="lines">@@ -35,32 +36,15 @@
</span><span class="cx">         this._element.classList.add(WebInspector.TabBarItem.StyleClassName);
</span><span class="cx">         this._element.setAttribute(&quot;role&quot;, &quot;tab&quot;);
</span><span class="cx">         this._element.tabIndex = 0;
</span><del>-        if (pinned)
-            this._element.classList.add(&quot;pinned&quot;);
</del><span class="cx">         this._element[WebInspector.TabBarItem.ElementReferenceSymbol] = this;
</span><span class="cx"> 
</span><del>-        if (!pinned) {
-            this._closeButtonElement = document.createElement(&quot;div&quot;);
-            this._closeButtonElement.classList.add(WebInspector.TabBarItem.CloseButtonStyleClassName);
-            this._closeButtonElement.title = WebInspector.UIString(&quot;Click to close this tab&quot;);
-            this._element.appendChild(this._closeButtonElement);
</del><ins>+        this._element.createChild(&quot;div&quot;, &quot;flex-space&quot;);
</ins><span class="cx"> 
</span><del>-            var flexSpaceElement = document.createElement(&quot;div&quot;);
-            flexSpaceElement.classList.add(&quot;flex-space&quot;);
-            this._element.appendChild(flexSpaceElement);
-
-            this._element.addEventListener(&quot;contextmenu&quot;, this._handleContextMenuEvent.bind(this));
-        }
-
</del><span class="cx">         this._iconElement = document.createElement(&quot;img&quot;);
</span><span class="cx">         this._iconElement.classList.add(&quot;icon&quot;);
</span><span class="cx">         this._element.appendChild(this._iconElement);
</span><span class="cx"> 
</span><del>-        if (!pinned) {
-            var flexSpaceElement = document.createElement(&quot;div&quot;);
-            flexSpaceElement.classList.add(&quot;flex-space&quot;);
-            this._element.appendChild(flexSpaceElement);
-        }
</del><ins>+        this._element.createChild(&quot;div&quot;, &quot;flex-space&quot;);
</ins><span class="cx"> 
</span><span class="cx">         this.title = title;
</span><span class="cx">         this.image = image;
</span><span class="lines">@@ -69,31 +53,14 @@
</span><span class="cx"> 
</span><span class="cx">     // Public
</span><span class="cx"> 
</span><del>-    get element()
-    {
-        return this._element;
-    }
</del><ins>+    get element() { return this._element; }
</ins><span class="cx"> 
</span><del>-    get representedObject()
-    {
-        return this._representedObject;
-    }
</del><ins>+    get representedObject() { return this._representedObject; }
+    set representedObject(representedObject) { this._representedObject = representedObject || null; }
</ins><span class="cx"> 
</span><del>-    set representedObject(representedObject)
-    {
-        this._representedObject = representedObject || null;
-    }
</del><ins>+    get parentTabBar() { return this._parentTabBar; }
+    set parentTabBar(tabBar){ this._parentTabBar = tabBar || null; }
</ins><span class="cx"> 
</span><del>-    get parentTabBar()
-    {
-        return this._parentTabBar;
-    }
-
-    set parentTabBar(tabBar)
-    {
-        this._parentTabBar = tabBar || null;
-    }
-
</del><span class="cx">     get selected()
</span><span class="cx">     {
</span><span class="cx">         return this._element.classList.contains(&quot;selected&quot;);
</span><span class="lines">@@ -129,76 +96,11 @@
</span><span class="cx">         this._element.classList.toggle(&quot;default-tab&quot;, isDefaultTab);
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    get pinned()
-    {
-        return this._element.classList.contains(&quot;pinned&quot;);
-    }
</del><ins>+    get image() { return this._iconElement.src; }
+    set image(url) { this._iconElement.src = url || &quot;&quot;; }
</ins><span class="cx"> 
</span><del>-    get image()
-    {
-        return this._iconElement.src;
-    }
-
-    set image(url)
-    {
-        this._iconElement.src = url || &quot;&quot;;
-    }
-
-    get title()
-    {
-        return this._element.title || &quot;&quot;;
-    }
-
-    set title(title)
-    {
-        if (title &amp;&amp; !this.pinned) {
-            this._titleElement = document.createElement(&quot;span&quot;);
-            this._titleElement.classList.add(&quot;title&quot;);
-
-            this._titleContentElement = document.createElement(&quot;span&quot;);
-            this._titleContentElement.classList.add(&quot;content&quot;);
-            this._titleElement.appendChild(this._titleContentElement);
-
-            this._titleContentElement.textContent = title;
-
-            this._element.insertBefore(this._titleElement, this._element.lastChild);
-        } else {
-            if (this._titleElement)
-                this._titleElement.remove();
-
-            this._titleContentElement = null;
-            this._titleElement = null;
-        }
-
-        this._element.title = title || &quot;&quot;;
-    }
-
-    // Private
-
-    _handleContextMenuEvent(event)
-    {
-        if (!this._parentTabBar)
-            return;
-
-        let closeTab = () =&gt; {
-            this._parentTabBar.removeTabBarItem(this);
-        };
-
-        let closeOtherTabs = () =&gt; {
-            let tabBarItems = this._parentTabBar.tabBarItems;
-            for (let i = tabBarItems.length - 1; i &gt;= 0; --i) {
-                let item = tabBarItems[i];
-                if (item === this || item.pinned)
-                    continue;
-                this._parentTabBar.removeTabBarItem(item);
-            }
-        };
-
-        let hasOtherNonPinnedTabs = this._parentTabBar.tabBarItems.some((item) =&gt; item !== this &amp;&amp; !item.pinned);
-        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
-        contextMenu.appendItem(WebInspector.UIString(&quot;Close Tab&quot;), closeTab, this.isDefaultTab);
-        contextMenu.appendItem(WebInspector.UIString(&quot;Close Other Tabs&quot;), closeOtherTabs, !hasOtherNonPinnedTabs);
-    }
</del><ins>+    get title() { return this._element.title || &quot;&quot;; }
+    set title(title) { this._element.title = title || &quot;&quot;; }
</ins><span class="cx"> };
</span><span class="cx"> 
</span><span class="cx"> WebInspector.TabBarItem.StyleClassName = &quot;item&quot;;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTabBrowserjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBrowser.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBrowser.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBrowser.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -53,7 +53,7 @@
</span><span class="cx">         let showPreviousTab = () =&gt; { this._showPreviousTab(); };
</span><span class="cx">         let closeCurrentTab = () =&gt; {
</span><span class="cx">             let selectedTabBarItem = this._tabBar.selectedTabBarItem;
</span><del>-            if (this._tabBar.tabBarItems.length &gt; 2 || !selectedTabBarItem.isDefaultTab)
</del><ins>+            if (this._tabBar.tabBarItems.length &gt; 3 || !selectedTabBarItem.isDefaultTab)
</ins><span class="cx">                 this._tabBar.removeTabBarItem(selectedTabBarItem);
</span><span class="cx">         };
</span><span class="cx"> 
</span><span class="lines">@@ -69,8 +69,6 @@
</span><span class="cx">         this._showPreviousTabKeyboardShortcut3 = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, WebInspector.KeyboardShortcut.Key.Left, this._showPreviousTabCheckingForEditableField.bind(this));
</span><span class="cx">         this._showPreviousTabKeyboardShortcut3.implicitlyPreventsDefault = false;
</span><span class="cx"> 
</span><del>-        this._tabBar.newTabItem = new WebInspector.TabBarItem(&quot;Images/NewTabPlus.svg&quot;, WebInspector.UIString(&quot;Create a new tab&quot;), true);
-
</del><span class="cx">         this._tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemSelected, this._tabBarItemSelected, this);
</span><span class="cx">         this._tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemRemoved, this._tabBarItemRemoved, this);
</span><span class="cx"> 
</span><span class="lines">@@ -129,7 +127,7 @@
</span><span class="cx">         if (!(tabContentView instanceof WebInspector.TabContentView))
</span><span class="cx">             return false;
</span><span class="cx"> 
</span><del>-        var tabBarItem = tabContentView.tabBarItem;
</del><ins>+        let tabBarItem = tabContentView.tabBarItem;
</ins><span class="cx"> 
</span><span class="cx">         console.assert(tabBarItem instanceof WebInspector.TabBarItem);
</span><span class="cx">         if (!(tabBarItem instanceof WebInspector.TabBarItem))
</span><span class="lines">@@ -155,7 +153,7 @@
</span><span class="cx">         else
</span><span class="cx">             this._tabBar.addTabBarItem(tabBarItem, doNotAnimate);
</span><span class="cx"> 
</span><del>-        console.assert(this._recentTabContentViews.length === this._tabBar.tabBarItems.length - (this._tabBar.newTabItem ? 1 : 0));
</del><ins>+        console.assert(this._recentTabContentViews.length === this._tabBar.normalTabCount);
</ins><span class="cx">         console.assert(!this.selectedTabContentView || this.selectedTabContentView === this._recentTabContentViews[0]);
</span><span class="cx"> 
</span><span class="cx">         return true;
</span><span class="lines">@@ -193,7 +191,7 @@
</span><span class="cx"> 
</span><span class="cx">         this._tabBar.removeTabBarItem(tabContentView.tabBarItem, doNotAnimate);
</span><span class="cx"> 
</span><del>-        console.assert(this._recentTabContentViews.length === this._tabBar.tabBarItems.length - (this._tabBar.newTabItem ? 1 : 0));
</del><ins>+        console.assert(this._recentTabContentViews.length === this._tabBar.normalTabCount);
</ins><span class="cx">         console.assert(!this.selectedTabContentView || this.selectedTabContentView === this._recentTabContentViews[0]);
</span><span class="cx"> 
</span><span class="cx">         return true;
</span><span class="lines">@@ -214,17 +212,20 @@
</span><span class="cx"> 
</span><span class="cx">     _tabBarItemSelected(event)
</span><span class="cx">     {
</span><del>-        var tabContentView = this._tabBar.selectedTabBarItem ? this._tabBar.selectedTabBarItem.representedObject : null;
</del><ins>+        let tabContentView = this._tabBar.selectedTabBarItem ? this._tabBar.selectedTabBarItem.representedObject : null;
</ins><span class="cx"> 
</span><span class="cx">         if (tabContentView) {
</span><del>-            this._recentTabContentViews.remove(tabContentView);
-            this._recentTabContentViews.unshift(tabContentView);
</del><ins>+            let isSettingsTab = tabContentView instanceof WebInspector.SettingsTabContentView;
+            if (!isSettingsTab) {
+                this._recentTabContentViews.remove(tabContentView);
+                this._recentTabContentViews.unshift(tabContentView);
+            }
</ins><span class="cx"> 
</span><span class="cx">             this._contentViewContainer.showContentView(tabContentView);
</span><span class="cx"> 
</span><span class="cx">             console.assert(this.selectedTabContentView);
</span><del>-            console.assert(this._recentTabContentViews.length === this._tabBar.tabBarItems.length - (this._tabBar.newTabItem ? 1 : 0));
-            console.assert(this.selectedTabContentView === this._recentTabContentViews[0]);
</del><ins>+            console.assert(this._recentTabContentViews.length === this._tabBar.normalTabCount);
+            console.assert(this.selectedTabContentView === this._recentTabContentViews[0] || isSettingsTab);
</ins><span class="cx">         } else {
</span><span class="cx">             this._contentViewContainer.closeAllContentViews();
</span><span class="cx"> 
</span><span class="lines">@@ -245,7 +246,7 @@
</span><span class="cx"> 
</span><span class="cx">     _tabBarItemRemoved(event)
</span><span class="cx">     {
</span><del>-        var tabContentView = event.data.tabBarItem.representedObject;
</del><ins>+        let tabContentView = event.data.tabBarItem.representedObject;
</ins><span class="cx"> 
</span><span class="cx">         console.assert(tabContentView);
</span><span class="cx">         if (!tabContentView)
</span><span class="lines">@@ -256,7 +257,7 @@
</span><span class="cx"> 
</span><span class="cx">         tabContentView.parentTabBrowser = null;
</span><span class="cx"> 
</span><del>-        console.assert(this._recentTabContentViews.length === this._tabBar.tabBarItems.length - (this._tabBar.newTabItem ? 1 : 0));
</del><ins>+        console.assert(this._recentTabContentViews.length === this._tabBar.normalTabCount);
</ins><span class="cx">         console.assert(!this.selectedTabContentView || this.selectedTabContentView === this._recentTabContentViews[0]);
</span><span class="cx">     }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TabContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -126,6 +126,8 @@
</span><span class="cx"> 
</span><span class="cx">     shown()
</span><span class="cx">     {
</span><ins>+        super.shown();
+
</ins><span class="cx">         if (this._shouldRestoreStateWhenShown)
</span><span class="cx">             this.restoreStateFromCookie(WebInspector.StateRestorationType.Delayed);
</span><span class="cx">     }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTextEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -31,18 +31,39 @@
</span><span class="cx"> 
</span><span class="cx">         this.element.classList.add(&quot;text-editor&quot;, WebInspector.SyntaxHighlightedStyleClassName);
</span><span class="cx"> 
</span><del>-        // FIXME: &lt;https://webkit.org/b/149120&gt; Web Inspector: Preferences for Text Editor behavior
</del><span class="cx">         this._codeMirror = WebInspector.CodeMirrorEditor.create(this.element, {
</span><span class="cx">             readOnly: true,
</span><del>-            indentWithTabs: true,
-            indentUnit: 4,
</del><ins>+            indentWithTabs: WebInspector.settings.indentWithTabs.value,
+            indentUnit: WebInspector.settings.indentUnit.value,
+            tabSize: WebInspector.settings.tabSize.value,
</ins><span class="cx">             lineNumbers: true,
</span><del>-            lineWrapping: false,
</del><ins>+            lineWrapping: WebInspector.settings.enableLineWrapping.value,
</ins><span class="cx">             matchBrackets: true,
</span><span class="cx">             autoCloseBrackets: true,
</span><ins>+            showWhitespaceCharacters: WebInspector.settings.showWhitespaceCharacters.value,
</ins><span class="cx">             styleSelectedText: true,
</span><span class="cx">         });
</span><span class="cx"> 
</span><ins>+        WebInspector.settings.indentWithTabs.addEventListener(WebInspector.Setting.Event.Changed, (event) =&gt; {
+            this._codeMirror.setOption(&quot;indentWithTabs&quot;, WebInspector.settings.indentWithTabs.value);
+        });
+
+        WebInspector.settings.indentUnit.addEventListener(WebInspector.Setting.Event.Changed, (event) =&gt; {
+            this._codeMirror.setOption(&quot;indentUnit&quot;, WebInspector.settings.indentUnit.value);
+        });
+
+        WebInspector.settings.tabSize.addEventListener(WebInspector.Setting.Event.Changed, (event) =&gt; {
+            this._codeMirror.setOption(&quot;tabSize&quot;, WebInspector.settings.tabSize.value);
+        });
+
+        WebInspector.settings.enableLineWrapping.addEventListener(WebInspector.Setting.Event.Changed, (event) =&gt; {
+            this._codeMirror.setOption(&quot;lineWrapping&quot;, WebInspector.settings.enableLineWrapping.value);
+        });
+
+        WebInspector.settings.showWhitespaceCharacters.addEventListener(WebInspector.Setting.Event.Changed, (event) =&gt; {
+            this._codeMirror.setOption(&quot;showWhitespaceCharacters&quot;, WebInspector.settings.showWhitespaceCharacters.value);
+        });
+
</ins><span class="cx">         this._codeMirror.on(&quot;change&quot;, this._contentChanged.bind(this));
</span><span class="cx">         this._codeMirror.on(&quot;gutterClick&quot;, this._gutterMouseDown.bind(this));
</span><span class="cx">         this._codeMirror.on(&quot;gutterContextMenu&quot;, this._gutterContextMenu.bind(this));
</span><span class="lines">@@ -532,6 +553,15 @@
</span><span class="cx">         this._visible = false;
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    close()
+    {
+        WebInspector.settings.indentWithTabs.removeEventListener(null, null, this);
+        WebInspector.settings.indentUnit.removeEventListener(null, null, this);
+        WebInspector.settings.tabSize.removeEventListener(null, null, this);
+        WebInspector.settings.enableLineWrapping.removeEventListener(null, null, this);
+        WebInspector.settings.showWhitespaceCharacters.removeEventListener(null, null, this);
+    }
+
</ins><span class="cx">     setBreakpointInfoForLineAndColumn(lineNumber, columnNumber, breakpointInfo)
</span><span class="cx">     {
</span><span class="cx">         if (this._ignoreSetBreakpointInfoCalls)
</span><span class="lines">@@ -807,10 +837,9 @@
</span><span class="cx"> 
</span><span class="cx">     _startWorkerPrettyPrint(beforePrettyPrintState, callback)
</span><span class="cx">     {
</span><del>-        // &lt;rdar://problem/10593948&gt; Provide a way to change the tab width in the Web Inspector
-        let indentString = &quot;    &quot;;
</del><span class="cx">         let sourceText = this._codeMirror.getValue();
</span><del>-        let includeSourceMapData = true;
</del><ins>+        let indentString = WebInspector.indentString();
+        const includeSourceMapData = true;
</ins><span class="cx"> 
</span><span class="cx">         // FIXME: Properly pass if this is a module or script.
</span><span class="cx">         const isModule = false;
</span><span class="lines">@@ -828,8 +857,7 @@
</span><span class="cx"> 
</span><span class="cx">     _startCodeMirrorPrettyPrint(beforePrettyPrintState, callback)
</span><span class="cx">     {
</span><del>-        // &lt;rdar://problem/10593948&gt; Provide a way to change the tab width in the Web Inspector
-        let indentString = &quot;    &quot;;
</del><ins>+        let indentString = WebInspector.indentString();
</ins><span class="cx">         let start = {line: 0, ch: 0};
</span><span class="cx">         let end = {line: this._codeMirror.lineCount() - 1};
</span><span class="cx">         let builder = new FormatterContentBuilder(indentString);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -174,6 +174,8 @@
</span><span class="cx"> 
</span><span class="cx">     shown()
</span><span class="cx">     {
</span><ins>+        super.shown();
+
</ins><span class="cx">         this._timelineOverview.shown();
</span><span class="cx">         this._timelineContentBrowser.shown();
</span><span class="cx">         this._clearTimelineNavigationItem.enabled = !this._recording.readonly &amp;&amp; !isNaN(this._recording.startTime);
</span><span class="lines">@@ -186,6 +188,8 @@
</span><span class="cx"> 
</span><span class="cx">     hidden()
</span><span class="cx">     {
</span><ins>+        super.hidden();
+
</ins><span class="cx">         this._timelineOverview.hidden();
</span><span class="cx">         this._timelineContentBrowser.hidden();
</span><span class="cx"> 
</span><span class="lines">@@ -195,6 +199,8 @@
</span><span class="cx"> 
</span><span class="cx">     closed()
</span><span class="cx">     {
</span><ins>+        super.closed();
+
</ins><span class="cx">         this._timelineContentBrowser.contentViewContainer.closeAllContentViews();
</span><span class="cx"> 
</span><span class="cx">         this._recording.removeEventListener(null, null, this);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -28,7 +28,7 @@
</span><span class="cx">     constructor(identifier)
</span><span class="cx">     {
</span><span class="cx">         let {image, title} = WebInspector.TimelineTabContentView.tabInfo();
</span><del>-        let tabBarItem = new WebInspector.TabBarItem(image, title);
</del><ins>+        let tabBarItem = new WebInspector.GeneralTabBarItem(image, title);
</ins><span class="cx">         let detailsSidebarPanels = [WebInspector.resourceDetailsSidebarPanel, WebInspector.probeDetailsSidebarPanel];
</span><span class="cx"> 
</span><span class="cx">         super(identifier || &quot;timeline&quot;, &quot;timeline&quot;, tabBarItem, null, detailsSidebarPanels);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js (208090 => 208091)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js        2016-10-29 01:06:13 UTC (rev 208090)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js        2016-10-29 01:17:43 UTC (rev 208091)
</span><span class="lines">@@ -122,8 +122,7 @@
</span><span class="cx"> 
</span><span class="cx">         styleText = styleText || &quot;&quot;;
</span><span class="cx"> 
</span><del>-        // FIXME: &lt;rdar://problem/10593948&gt; Provide a way to change the tab width in the Web Inspector
-        let linePrefixText = &quot;    &quot;;
</del><ins>+        let linePrefixText = WebInspector.indentString();
</ins><span class="cx">         let lineSuffixWhitespace = &quot;\n&quot;;
</span><span class="cx">         let trimmedText = styleText.trimRight();
</span><span class="cx">         let textHasNewlines = trimmedText.includes(&quot;\n&quot;);
</span></span></pre>
</div>
</div>

</body>
</html>