<!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>[193107] branches/safari-601-branch/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/193107">193107</a></dd>
<dt>Author</dt> <dd>timothy@apple.com</dd>
<dt>Date</dt> <dd>2015-12-03 10:47:24 -0800 (Thu, 03 Dec 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Merge <a href="http://trac.webkit.org/projects/webkit/changeset/188484">r188484</a>. rdar://problem/23221163</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#branchessafari601branchSourceWebInspectorUIChangeLog">branches/safari-601-branch/Source/WebInspectorUI/ChangeLog</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyCombinerjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyCombiner.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorcss">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleTabbedPropertiesRowcss">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.css</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleTabbedPropertiesRowjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="branchessafari601branchSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/ChangeLog (193106 => 193107)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/ChangeLog 2015-12-03 18:47:17 UTC (rev 193106)
+++ branches/safari-601-branch/Source/WebInspectorUI/ChangeLog 2015-12-03 18:47:24 UTC (rev 193107)
</span><span class="lines">@@ -1,5 +1,107 @@
</span><span class="cx"> 2015-12-02 Timothy Hatcher <timothy@apple.com>
</span><span class="cx">
</span><ins>+ Merge r188484. rdar://problem/23221163
+
+ 2015-08-14 Devin Rousso <drousso@apple.com>
+
+ Web Inspector: Add visual editors for CSS properties
+ https://bugs.webkit.org/show_bug.cgi?id=147576
+
+ Added parent class for property editors in the Visual style
+ details panel in the CSS sidebar.
+
+ Reviewed by Timothy Hatcher.
+
+ * UserInterface/Views/VisualStylePropertyCombiner.js: Added.
+ (WebInspector.VisualStylePropertyCombiner):
+ (WebInspector.VisualStylePropertyCombiner.prototype.get style):
+ (WebInspector.VisualStylePropertyCombiner.prototype.get synthesizedValue):
+ (WebInspector.VisualStylePropertyCombiner.prototype.modifyPropertyText):
+ (WebInspector.VisualStylePropertyCombiner.prototype.update):
+ (WebInspector.VisualStylePropertyCombiner.prototype.updateValuesFromText.updateCompatibleEditor):
+ (WebInspector.VisualStylePropertyCombiner.prototype.updateValuesFromText):
+ (WebInspector.VisualStylePropertyCombiner.prototype.propertyMissing):
+ (WebInspector.VisualStylePropertyCombiner.prototype.resetEditorValues):
+ (WebInspector.VisualStylePropertyCombiner.prototype._markEditors):
+ (WebInspector.VisualStylePropertyCombiner.prototype._handlePropertyEditorValueChanged):
+
+ * UserInterface/Views/VisualStylePropertyEditor.css: Added.
+ (.visual-style-property-container):
+ (.visual-style-property-container > .visual-style-property-title):
+ (.visual-style-property-container > .visual-style-property-title > .property-reference-info):
+ (.visual-style-property-container.disabled > .visual-style-property-title > :not(.property-reference-info)):
+ (.visual-style-property-container > .visual-style-property-value-container):
+ (.visual-style-property-container.disabled > .visual-style-property-value-container):
+ (.visual-style-property-container > .visual-style-property-value-container select):
+ (.visual-style-property-container > .visual-style-property-value-container input):
+ (.visual-style-property-container.disabled > .visual-style-property-value-container input):
+ (.visual-style-property-container.layout-reversed > .visual-style-property-title):
+ (.visual-style-property-container > .visual-style-property-value-container > .visual-style-special-property-placeholder):
+ (.visual-style-property-info-popover):
+ (.visual-style-property-info-popover > h3):
+
+ * UserInterface/Views/VisualStylePropertyEditor.js: Added.
+ (WebInspector.VisualStylePropertyEditor.canonicalizeValues):
+ (WebInspector.VisualStylePropertyEditor):
+ (WebInspector.VisualStylePropertyEditor.prototype.get element):
+ (WebInspector.VisualStylePropertyEditor.prototype.get style):
+ (WebInspector.VisualStylePropertyEditor.prototype.get value):
+ (WebInspector.VisualStylePropertyEditor.prototype.set value):
+ (WebInspector.VisualStylePropertyEditor.prototype.get units):
+ (WebInspector.VisualStylePropertyEditor.prototype.set units):
+ (WebInspector.VisualStylePropertyEditor.prototype.get placeholder):
+ (WebInspector.VisualStylePropertyEditor.prototype.set placeholder):
+ (WebInspector.VisualStylePropertyEditor.prototype.get synthesizedValue):
+ (WebInspector.VisualStylePropertyEditor.prototype.set suppressStyleTextUpdate):
+ (WebInspector.VisualStylePropertyEditor.prototype.set masterProperty):
+ (WebInspector.VisualStylePropertyEditor.prototype.get masterProperty):
+ (WebInspector.VisualStylePropertyEditor.prototype.set optionalProperty):
+ (WebInspector.VisualStylePropertyEditor.prototype.get optionalProperty):
+ (WebInspector.VisualStylePropertyEditor.prototype.set colorProperty):
+ (WebInspector.VisualStylePropertyEditor.prototype.get colorProperty):
+ (WebInspector.VisualStylePropertyEditor.prototype.get propertyReferenceName):
+ (WebInspector.VisualStylePropertyEditor.prototype.set propertyReferenceName):
+ (WebInspector.VisualStylePropertyEditor.prototype.set disabled):
+ (WebInspector.VisualStylePropertyEditor.prototype.get disabled):
+ (WebInspector.VisualStylePropertyEditor.prototype.update):
+ (WebInspector.VisualStylePropertyEditor.prototype.updateEditorValues):
+ (WebInspector.VisualStylePropertyEditor.prototype.resetEditorValues):
+ (WebInspector.VisualStylePropertyEditor.prototype.modifyPropertyText):
+ (WebInspector.VisualStylePropertyEditor.prototype.getValuesFromText):
+ (WebInspector.VisualStylePropertyEditor.prototype.propertyMissing):
+ (WebInspector.VisualStylePropertyEditor.prototype.valueIsCompatible):
+ (WebInspector.VisualStylePropertyEditor.prototype.valueIsSupportedKeyword):
+ (WebInspector.VisualStylePropertyEditor.prototype.valueIsSupportedUnit):
+ (WebInspector.VisualStylePropertyEditor.prototype.get contentElement):
+ (WebInspector.VisualStylePropertyEditor.prototype.get specialPropertyPlaceholderElement):
+ (WebInspector.VisualStylePropertyEditor.prototype.parseValue):
+ (WebInspector.VisualStylePropertyEditor.prototype._valueIsSupportedAdvancedKeyword):
+ (WebInspector.VisualStylePropertyEditor.prototype._valueIsSupportedAdvancedUnit):
+ (WebInspector.VisualStylePropertyEditor.prototype._canonicalizedKeywordForKey):
+ (WebInspector.VisualStylePropertyEditor.prototype._keyForKeyword):
+ (WebInspector.VisualStylePropertyEditor.prototype._valueDidChange):
+ (WebInspector.VisualStylePropertyEditor.prototype._replaceShorthandPropertyWithLonghandProperties):
+ (WebInspector.VisualStylePropertyEditor.prototype._titleElementPrepareForClick):
+ (WebInspector.VisualStylePropertyEditor.prototype._titleElementMouseOver):
+ (WebInspector.VisualStylePropertyEditor.prototype._titleElementMouseOut):
+ (WebInspector.VisualStylePropertyEditor.prototype._titleElementClick):
+ (WebInspector.VisualStylePropertyEditor.prototype._hasMultipleConflictingValues):
+ (WebInspector.VisualStylePropertyEditor.prototype._showPropertyInfoPopover):
+ (WebInspector.VisualStylePropertyEditor.prototype._toggleTabbingOfSelectableElements):
+
+ * UserInterface/Views/VisualStyleTabbedPropertiesRow.css: Added.
+ (.visual-style-tabbed-properties-row ~ :not(.visible)):
+ (.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container):
+ (.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container > button):
+ (.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container > button.selected):
+ (.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container > button:not(.selected):hover):
+
+ * UserInterface/Views/VisualStyleTabbedPropertiesRow.js: Added.
+ (WebInspector.VisualStyleTabbedPropertiesRow):
+ (WebInspector.VisualStyleTabbedPropertiesRow.prototype._handleButtonClicked):
+
+2015-12-02 Timothy Hatcher <timothy@apple.com>
+
</ins><span class="cx"> Merge r188483. rdar://problem/23221163
</span><span class="cx">
</span><span class="cx"> 2015-08-14 Devin Rousso <drousso@apple.com>
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyCombinerjs"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyCombiner.js (0 => 193107)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyCombiner.js (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyCombiner.js 2015-12-03 18:47:24 UTC (rev 193107)
</span><span class="lines">@@ -0,0 +1,182 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. 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.VisualStylePropertyCombiner = class VisualStylePropertyCombiner extends WebInspector.Object
+{
+ constructor(propertyName, propertyEditors)
+ {
+ super();
+
+ this._style = null;
+ this._propertyName = propertyName;
+ this._propertyMissing = false;
+ this._propertyEditors = propertyEditors || [];
+
+ for (let editor of this._propertyEditors) {
+ editor.addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, this._handlePropertyEditorValueChanged, this);
+ editor.suppressStyleTextUpdate = true;
+ }
+
+ this._textContainsNameRegExp = new RegExp("(?:(?:^|;)\\s*" + this._propertyName + "\\s*:)");
+ this._replacementRegExp = new RegExp("(^|;)(?:\\s*)(" + this._propertyName + ")(.+?(?:;|$))");
+ this._valueRegExp = /([^\s]+\(.+\)|[^\s]+)(?:;?)/g;
+ }
+
+ get style()
+ {
+ return this._style;
+ }
+
+ get synthesizedValue()
+ {
+ var value = "";
+ var oneEditorHasValue = false;
+ for (let editor of this._propertyEditors) {
+ var editorValue = editor.synthesizedValue;
+ if (editorValue && editorValue.length)
+ oneEditorHasValue = true;
+ else if (editor.optionalProperty)
+ continue;
+
+ if (editor.masterProperty && editor.valueIsSupportedKeyword()) {
+ this._markEditors(editor, true);
+ return editorValue;
+ }
+
+ if (editor !== this._propertyEditors[0])
+ value += " ";
+
+ value += editorValue || (editor.colorProperty ? "transparent" : 0);
+ }
+
+ this._markEditors();
+ return value.length && oneEditorHasValue ? value : null;
+ }
+
+ modifyPropertyText(text, value)
+ {
+ var trimmedText = text.trimRight();
+ if (this._textContainsNameRegExp.test(text))
+ text = text.replace(this._replacementRegExp, value !== null ? "$1$2: " + value + ";" : "$1");
+ else if (value !== null) {
+ if (trimmedText.trimLeft().length && !trimmedText.endsWith(";"))
+ text += ";";
+
+ text += this._propertyName + ": " + value + ";";
+ }
+ return text;
+ }
+
+ update(style)
+ {
+ if (style)
+ this._style = style;
+ else if (this._ignoreNextUpdate) {
+ this._ignoreNextUpdate = false;
+ return;
+ }
+
+ if (!this._style || !this._valueRegExp)
+ return;
+
+ var property = this._style.propertyForName(this._propertyName, true);
+ var propertyMissing = !property;
+ if (propertyMissing && this._style.nodeStyles)
+ property = this._style.nodeStyles.computedStyle.propertyForName(this._propertyName);
+
+ if (!property)
+ return;
+
+ this.updateValuesFromText(property.value, propertyMissing);
+ this._propertyMissing = propertyMissing;
+ }
+
+ updateValuesFromText(styleText, propertyMissing)
+ {
+ if (styleText === this.synthesizedValue)
+ return;
+
+ for (let editor of this._propertyEditors)
+ editor[WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol] = false;
+
+ function updateCompatibleEditor(value) {
+ for (let editor of this._propertyEditors) {
+ if (value && !editor.valueIsCompatible(value) || editor[WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol])
+ continue;
+
+ if (this._currentValueIsKeyword && editor.disabled)
+ continue;
+
+ var updatedValues = editor.getValuesFromText(value || "", propertyMissing);
+ editor.updateEditorValues(updatedValues);
+ editor[WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol] = true;
+
+ if (value)
+ return;
+ }
+ }
+
+ var matches = styleText.match(this._valueRegExp);
+ for (let i = 0; i < this._propertyEditors.length; ++i)
+ updateCompatibleEditor.call(this, matches && matches[i]);
+ }
+
+ get propertyMissing()
+ {
+ return this._propertyMissing;
+ }
+
+ resetEditorValues(value)
+ {
+ this._ignoreNextUpdate = false;
+ this.updateValuesFromText(value || "");
+ }
+
+ // Private
+
+ _markEditors(ignoredEditor, disabled)
+ {
+ this._currentValueIsKeyword = disabled || false;
+ for (let editor of this._propertyEditors) {
+ if (ignoredEditor && editor === ignoredEditor)
+ continue;
+
+ editor.disabled = this._currentValueIsKeyword;
+ }
+ }
+
+ _handlePropertyEditorValueChanged()
+ {
+ this._ignoreNextUpdate = true;
+ var value = this.synthesizedValue;
+ if (this._style)
+ this._style.text = this.modifyPropertyText(this._style.text, value);
+
+ this._propertyMissing = !value;
+ this.dispatchEventToListeners(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange);
+ }
+};
+
+WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol = Symbol("visual-style-property-combiner-editor-updated");
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorcss"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css (0 => 193107)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css 2015-12-03 18:47:24 UTC (rev 193107)
</span><span class="lines">@@ -0,0 +1,99 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. 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.
+ */
+
+.visual-style-property-container {
+ display: flex;
+ width: 100%;
+ min-height: 22px;
+}
+
+.visual-style-property-container > .visual-style-property-title {
+ margin: 4px;
+ text-align: right;
+}
+
+.visual-style-property-container > .visual-style-property-title > .property-reference-info{
+ cursor: help;
+}
+
+.visual-style-property-container.disabled > .visual-style-property-title > :not(.property-reference-info) {
+ opacity: 0.7;
+}
+
+.visual-style-property-container > .visual-style-property-value-container {
+ flex: 1;
+ position: relative;
+}
+
+.visual-style-property-container.disabled > .visual-style-property-value-container {
+ pointer-events: none;
+ opacity: 0.4;
+}
+
+.visual-style-property-container > .visual-style-property-value-container select {
+ width: 100%;
+ margin: 1px 0;
+}
+
+.visual-style-property-container > .visual-style-property-value-container input {
+ width: calc(100% - 1px);
+ margin: 0;
+ outline: none;
+}
+
+.visual-style-property-container.disabled > .visual-style-property-value-container input {
+ pointer-events: none !important;
+}
+
+.visual-style-property-container.layout-reversed > .visual-style-property-title {
+ order: 2;
+ text-align: left;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .visual-style-special-property-placeholder {
+ position: absolute;
+ top: 2px;
+ left: 1px;
+ width: calc(100% - 20px);
+ line-height: 16px;
+ text-indent: 7px;
+ border-radius: 4px;
+ background-color: white;
+ color: hsl(0, 0%, 50%);
+ pointer-events: none;
+ overflow: hidden;
+ white-space: nowrap;
+ z-index: 1;
+}
+
+.visual-style-property-info-popover {
+ width: 190px;
+ margin: 0 5px 3px;
+ padding: 0;
+}
+
+.visual-style-property-info-popover > h3 {
+ margin: 6px 3px;
+}
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorjs"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js (0 => 193107)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js 2015-12-03 18:47:24 UTC (rev 193107)
</span><span class="lines">@@ -0,0 +1,525 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. 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.VisualStylePropertyEditor = class VisualStylePropertyEditor extends WebInspector.Object
+{
+ constructor(propertyNames, label, possibleValues, possibleUnits, className, layoutReversed)
+ {
+ super();
+
+ this._propertyInfoList = [];
+ this._style = null;
+
+ function canonicalizeValues(values)
+ {
+ if (!values)
+ return;
+
+ var canonicalizedValues = {};
+ for (let value of values)
+ canonicalizedValues[value.toLowerCase().replace(/\s/g, "-")] = value;
+
+ return canonicalizedValues;
+ }
+
+ this._possibleValues = null;
+ if (possibleValues) {
+ this._possibleValues = {};
+ if (Array.isArray(possibleValues))
+ this._possibleValues.basic = canonicalizeValues(possibleValues);
+ else {
+ this._possibleValues.basic = canonicalizeValues(possibleValues.basic);
+ this._possibleValues.advanced = canonicalizeValues(possibleValues.advanced);
+ }
+ }
+ this._possibleUnits = null;
+ if (possibleUnits) {
+ this._possibleUnits = {};
+ if (Array.isArray(possibleUnits))
+ this._possibleUnits.basic = possibleUnits;
+ else
+ this._possibleUnits = possibleUnits;
+ }
+
+ this._element = document.createElement("div");
+ this._element.classList.add("visual-style-property-container", className);
+ this._element.classList.toggle("layout-reversed", layoutReversed);
+
+ if (label && label.length) {
+ var titleContainer = document.createElement("div");
+ titleContainer.classList.add("visual-style-property-title");
+
+ this._titleElement = document.createElement("span");
+ this._titleElement.appendChild(document.createTextNode(label));
+ this._titleElement.addEventListener("mouseover", this._titleElementMouseOver.bind(this));
+ this._titleElement.addEventListener("mouseout", this._titleElementMouseOut.bind(this));
+ this._titleElement.addEventListener("click", this._titleElementClick.bind(this));
+ titleContainer.appendChild(this._titleElement);
+
+ this._element.appendChild(titleContainer);
+
+ this._boundTitleElementPrepareForClick = this._titleElementPrepareForClick.bind(this);
+ }
+
+ this._contentElement = document.createElement("div");
+ this._contentElement.classList.add("visual-style-property-value-container");
+
+ this._specialPropertyPlaceholderElement = document.createElement("span");
+ this._specialPropertyPlaceholderElement.classList.add("visual-style-special-property-placeholder");
+ this._specialPropertyPlaceholderElement.hidden = true;
+ this._contentElement.appendChild(this._specialPropertyPlaceholderElement);
+
+ this._element.appendChild(this._contentElement);
+
+ this._updatedValues = {};
+ this._lastValue = null;
+
+ if (typeof propertyNames === "string")
+ propertyNames = [propertyNames];
+ else {
+ this._hasMultipleProperties = true;
+ this._element.classList.add("multiple");
+ }
+
+ for (let name of propertyNames) {
+ this._element.classList.add(name);
+ this._propertyInfoList.push({
+ name,
+ textContainsNameRegExp: new RegExp("(?:(?:^|;)\\s*" + name + "\\s*:)"),
+ replacementRegExp: new RegExp("(^|;)(?:\\s*)(" + name + ")(.+?(?:;|$))")
+ })
+ }
+
+ this._propertyReferenceName = propertyNames[0];
+ this._propertyReferenceText = WebInspector.VisualStyleDetailsPanel.propertyReferenceInfo[this._propertyReferenceName];
+ this._hasPropertyReference = this._propertyReferenceText && !!this._propertyReferenceText.trim().length;
+ this._representedProperty = null;
+ }
+
+ // Public
+
+ get element()
+ {
+ return this._element;
+ }
+
+ get style()
+ {
+ return this._style;
+ }
+
+ get value()
+ {
+ // Implemented by subclass.
+ }
+
+ set value(value)
+ {
+ // Implemented by subclass.
+ }
+
+ get units()
+ {
+ // Implemented by subclass.
+ }
+
+ set units(unit)
+ {
+ // Implemented by subclass.
+ }
+
+ get placeholder()
+ {
+ // Implemented by subclass.
+ }
+
+ set placeholder(text)
+ {
+ // Implemented by subclass.
+ }
+
+ get synthesizedValue()
+ {
+ // Implemented by subclass.
+ }
+
+ set suppressStyleTextUpdate(flag)
+ {
+ this._suppressStyleTextUpdate = flag;
+ }
+
+ set masterProperty(flag)
+ {
+ this._masterProperty = flag;
+ }
+
+ get masterProperty()
+ {
+ return this._masterProperty;
+ }
+
+ set optionalProperty(flag)
+ {
+ this._optionalProperty = flag;
+ }
+
+ get optionalProperty()
+ {
+ return this._optionalProperty;
+ }
+
+ set colorProperty(flag)
+ {
+ this._colorProperty = flag;
+ }
+
+ get colorProperty()
+ {
+ return this._colorProperty;
+ }
+
+ get propertyReferenceName()
+ {
+ return this._propertyReferenceName;
+ }
+
+ set propertyReferenceName(name)
+ {
+ if (!name || !name.length)
+ return;
+
+ this._propertyReferenceName = name;
+ }
+
+ set disabled(flag)
+ {
+ this._disabled = flag;
+ this._element.classList.toggle("disabled", this._disabled);
+ this._toggleTabbingOfSelectableElements(this._disabled);
+ }
+
+ get disabled()
+ {
+ return this._disabled;
+ }
+
+ update(style)
+ {
+ if (style)
+ this._style = style;
+ else if (this._ignoreNextUpdate) {
+ this._ignoreNextUpdate = false;
+ return;
+ }
+
+ if (!this._style)
+ return;
+
+ this._updatedValues = {};
+ var propertyValuesConflict = false;
+ var propertyMissing = false;
+ for (let propertyInfo of this._propertyInfoList) {
+ var property = this._style.propertyForName(propertyInfo.name, true);
+ propertyMissing = !property;
+ if (propertyMissing && this._style.nodeStyles)
+ property = this._style.nodeStyles.computedStyle.propertyForName(propertyInfo.name);
+
+ if (!property)
+ continue;
+
+ if (!propertyMissing && property.anonymous)
+ this._representedProperty = property;
+
+ var newValues = this.getValuesFromText(property.value, propertyMissing);
+ if (this._updatedValues.placeholder && this._updatedValues.placeholder !== newValues.placeholder)
+ propertyValuesConflict = true;
+
+ if (!this._updatedValues.placeholder)
+ this._updatedValues = newValues;
+
+ if (propertyValuesConflict) {
+ this._updatedValues.conflictingValues = true;
+ this._specialPropertyPlaceholderElement.textContent = WebInspector.UIString("(multiple)");
+ break;
+ }
+ }
+
+ if (this._hasMultipleProperties)
+ this._specialPropertyPlaceholderElement.hidden = !propertyValuesConflict;
+
+ this.updateEditorValues(this._updatedValues);
+ }
+
+ updateEditorValues(updatedValues)
+ {
+ this.value = updatedValues.value;
+ this.units = updatedValues.units;
+ this.placeholder = updatedValues.placeholder;
+
+ this._lastValue = this.synthesizedValue;
+ this.disabled = false;
+ }
+
+ resetEditorValues(value)
+ {
+ this._ignoreNextUpdate = false;
+ if (!value || !value.length) {
+ this.value = null;
+ this._specialPropertyPlaceholderElement.hidden = false;
+ return;
+ }
+
+ var updatedValues = this.getValuesFromText(value);
+ this.updateEditorValues(updatedValues);
+ }
+
+ modifyPropertyText(text, value)
+ {
+ var trimmedText = text.trimRight();
+ for (let property of this._propertyInfoList) {
+ if (property.textContainsNameRegExp.test(text))
+ text = text.replace(property.replacementRegExp, value !== null ? "$1$2: " + value + ";" : "$1");
+ else if (value !== null) {
+ if (trimmedText.trimLeft().length && !trimmedText.endsWith(";"))
+ text += ";";
+
+ text += property.name + ": " + value + ";";
+ }
+ }
+ return text;
+ }
+
+ getValuesFromText(text, propertyMissing)
+ {
+ var match = this.parseValue(text);
+ var placeholder = match ? match[1] : text;
+ var units = match ? match[2] : null;
+ var value = placeholder;
+ if (propertyMissing)
+ value = this.valueIsSupportedKeyword(text) ? text : null;
+
+ return {value, units, placeholder, propertyMissing};
+ }
+
+ get propertyMissing()
+ {
+ return this._updatedValues && this._updatedValues.propertyMissing;
+ }
+
+ valueIsCompatible(value)
+ {
+ if (!value || !value.length)
+ return false;
+
+ return this.valueIsSupportedKeyword(value) || !!this.parseValue(value);
+ }
+
+ valueIsSupportedKeyword(value) {
+ if (!this._possibleValues)
+ return false;
+
+ value = value || this.value;
+ if (Object.keys(this._possibleValues.basic).includes(value))
+ return true;
+
+ return this._valueIsSupportedAdvancedKeyword(value);
+ }
+
+ valueIsSupportedUnit(unit)
+ {
+ if (!this._possibleUnits)
+ return false;
+
+ unit = unit || this.units;
+ if (this._possibleUnits.basic.includes(unit))
+ return true;
+
+ return this._valueIsSupportedAdvancedUnit(unit);
+ }
+
+ // Protected
+
+ get contentElement()
+ {
+ return this._contentElement;
+ }
+
+ get specialPropertyPlaceholderElement()
+ {
+ return this._specialPropertyPlaceholderElement;
+ }
+
+ parseValue(text)
+ {
+ return /^([^;]+)\s*;?$/.exec(text);
+ }
+
+ // Private
+
+ _valueIsSupportedAdvancedKeyword(value)
+ {
+ return this._possibleValues.advanced && Object.keys(this._possibleValues.advanced).includes(value || this.value);
+ }
+
+ _valueIsSupportedAdvancedUnit(unit)
+ {
+ return this._possibleUnits.advanced && this._possibleUnits.advanced.includes(unit || this.units);
+ }
+
+ _canonicalizedKeywordForKey(value)
+ {
+ if (!value || !this._possibleValues)
+ return null;
+
+ return this._possibleValues.basic[value] || (this._possibleValues.advanced && this._possibleValues.advanced[value]) || null;
+ }
+
+ _keyForKeyword(keyword)
+ {
+ if (!keyword || !keyword.length || !this._possibleValues)
+ return null;
+
+ for (let basicKey in this._possibleValues.basic) {
+ if (this._possibleValues.basic[basicKey] === keyword)
+ return basicKey;
+ }
+
+ if (!this._possibleValues.advanced)
+ return null;
+
+ for (let advancedKey in this._possibleValues.advanced) {
+ if (this._possibleValues.advanced[advancedKey] === keyword)
+ return advancedKey;
+ }
+
+ return null;
+ }
+
+ _valueDidChange()
+ {
+ var value = this.synthesizedValue;
+ if (value === this._lastValue)
+ return false;
+
+ if (this._style && !this._suppressStyleTextUpdate) {
+ var newText = this._style.text;
+ newText = this._replaceShorthandPropertyWithLonghandProperties(newText);
+ newText = this.modifyPropertyText(newText, value);
+ this._style.text = newText;
+ if (!newText.length)
+ this._style.update(null, null, this._style.styleSheetTextRange);
+ }
+
+ this._lastValue = value;
+ this._updatedValues.propertyMissing = !value;
+ this._ignoreNextUpdate = true;
+ this._specialPropertyPlaceholderElement.hidden = true;
+
+ this.dispatchEventToListeners(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange);
+ return true;
+ }
+
+ _replaceShorthandPropertyWithLonghandProperties(text)
+ {
+ if (!this._representedProperty)
+ return text;
+
+ var shorthand = this._representedProperty.relatedShorthandProperty;
+ if (!shorthand)
+ return text;
+
+ var longhandText = "";
+ for (let longhandProperty of shorthand.relatedLonghandProperties) {
+ if (longhandProperty.anonymous)
+ longhandText += longhandProperty.synthesizedText;
+ }
+ return longhandText ? text.replace(shorthand.text, longhandText) : text;
+ }
+
+ _titleElementPrepareForClick(event)
+ {
+ this._titleElement.classList.toggle("property-reference-info", event.type === "keydown" && event.altKey);
+ }
+
+ _titleElementMouseOver(event)
+ {
+ if (!this._hasPropertyReference)
+ return;
+
+ this._titleElement.classList.toggle("property-reference-info", event.altKey);
+ document.addEventListener("keydown", this._boundTitleElementPrepareForClick);
+ document.addEventListener("keyup", this._boundTitleElementPrepareForClick);
+ }
+
+ _titleElementMouseOut()
+ {
+ if (!this._hasPropertyReference)
+ return;
+
+ this._titleElement.classList.remove("property-reference-info");
+ document.removeEventListener("keydown", this._boundTitleElementPrepareForClick);
+ document.removeEventListener("keyup", this._boundTitleElementPrepareForClick);
+ }
+
+ _titleElementClick(event)
+ {
+ if (event.altKey)
+ this._showPropertyInfoPopover();
+ }
+
+ _hasMultipleConflictingValues()
+ {
+ return this._hasMultipleProperties && !this._specialPropertyPlaceholderElement.hidden;
+ }
+
+ _showPropertyInfoPopover()
+ {
+ if (!this._hasPropertyReference)
+ return;
+
+ var propertyInfoElement = document.createElement("p");
+ propertyInfoElement.classList.add("visual-style-property-info-popover");
+
+ var propertyInfoTitleElement = document.createElement("h3");
+ propertyInfoTitleElement.appendChild(document.createTextNode(this._propertyReferenceName));
+ propertyInfoElement.appendChild(propertyInfoTitleElement);
+
+ propertyInfoElement.appendChild(document.createTextNode(this._propertyReferenceText));
+
+ var bounds = WebInspector.Rect.rectFromClientRect(this._titleElement.getBoundingClientRect());
+ var popover = new WebInspector.Popover(this);
+ popover.content = propertyInfoElement;
+ popover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_Y]);
+ }
+
+ _toggleTabbingOfSelectableElements(disabled)
+ {
+ // Implemented by subclass.
+ }
+};
+
+WebInspector.VisualStylePropertyEditor.Event = {
+ ValueDidChange: "visual-style-property-editor-value-changed"
+}
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleTabbedPropertiesRowcss"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.css (0 => 193107)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.css (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.css 2015-12-03 18:47:24 UTC (rev 193107)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. 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.
+ */
+
+.visual-style-tabbed-properties-row ~ :not(.visible) {
+ visibility: hidden;
+ height: 0;
+}
+
+.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container {
+ margin: 0 auto;
+}
+
+.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container > button {
+ margin: 0 2px 2px;
+ border-radius: 3px;
+ border-width: 0 1px;
+ border-color: transparent;
+ background-color: transparent;
+}
+
+.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container > button.selected {
+ color: white;
+ background-color: hsl(213, 92%, 55%);
+}
+
+.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container > button:not(.selected):hover {
+ color: white;
+ background-color: hsla(213, 92%, 55%, 0.5);
+}
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleTabbedPropertiesRowjs"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.js (0 => 193107)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.js (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.js 2015-12-03 18:47:24 UTC (rev 193107)
</span><span class="lines">@@ -0,0 +1,69 @@
</span><ins>+/*
+ * Copyright (C) 2013 Apple Inc. 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.VisualStyleTabbedPropertiesRow = class VisualStyleTabbedPropertiesRow extends WebInspector.DetailsSectionRow
+{
+ constructor(tabMap)
+ {
+ super();
+
+ this._element.classList.add("visual-style-tabbed-properties-row");
+
+ var containerElement = document.createElement("div");
+ containerElement.classList.add("visual-style-tabbed-properties-row-container");
+
+ this._tabButtons = [];
+ this._tabMap = tabMap;
+ for (let key in this._tabMap) {
+ var button = document.createElement("button");
+ button.id = key;
+ button.textContent = this._tabMap[key].title;
+ button.addEventListener("click", this._handleButtonClicked.bind(this));
+
+ containerElement.appendChild(button);
+ this._tabButtons.push(button);
+ }
+
+ var firstButton = this._tabButtons[0];
+ firstButton.classList.add("selected");
+ this._tabMap[firstButton.id].element.classList.add("visible");
+
+ this._element.appendChild(containerElement);
+ }
+
+ // Private
+
+ _handleButtonClicked(event)
+ {
+ for (let item of this._tabButtons) {
+ var tab = this._tabMap[item.id];
+ var selected = item === event.target;
+ item.classList.toggle("selected", selected);
+ tab.element.classList.toggle("visible", selected);
+ for (let propertyEditor of tab.properties)
+ propertyEditor.update();
+ }
+ }
+};
</ins></span></pre>
</div>
</div>
</body>
</html>