<!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>[193112] 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/193112">193112</a></dd>
<dt>Author</dt> <dd>timothy@apple.com</dd>
<dt>Date</dt> <dd>2015-12-03 10:47:57 -0800 (Thu, 03 Dec 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Merge <a href="http://trac.webkit.org/projects/webkit/changeset/188503">r188503</a>. rdar://problem/23221163</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#branchessafari601branchSourceWebInspectorUIChangeLog">branches/safari-601-branch/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceMainhtml">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsDetailsSectionjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPanelcss">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.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 (193111 => 193112)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/ChangeLog        2015-12-03 18:47:45 UTC (rev 193111)
+++ branches/safari-601-branch/Source/WebInspectorUI/ChangeLog        2015-12-03 18:47:57 UTC (rev 193112)
</span><span class="lines">@@ -1,5 +1,89 @@
</span><span class="cx"> 2015-12-02 Timothy Hatcher <timothy@apple.com>
</span><span class="cx">
</span><ins>+ Merge r188503. rdar://problem/23221163
+
+ 2015-08-14 Devin Rousso <drousso@apple.com>
+
+ Web Inspector: Add VisualStyleDetailsPanel
+ https://bugs.webkit.org/show_bug.cgi?id=147570
+
+ Reviewed by Timothy Hatcher.
+
+ Added VisualStyleDetailsPanel and inclusions to forthcoming classes
+ that will be used in this visual sidebar panel.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Main.html:
+ Added files for all new classes used in the VisualStyleDetailsPanel.
+
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
+ (WebInspector.CSSStyleDetailsSidebarPanel):
+ * UserInterface/Views/DetailsSection.js:
+ (WebInspector.DetailsSection):
+ (WebInspector.DetailsSection.prototype.set collapsed):
+ (WebInspector.DetailsSection.prototype.get expandedByUser):
+ (WebInspector.DetailsSection.prototype._headerElementClicked):
+ Track whether or not the expanded state was caused by the user.
+
+ * UserInterface/Views/VisualStyleDetailsPanel.css: Added.
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .header):
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .header > .visual-style-section-clear):
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section:not(.modified) > .header > .visual-style-section-clear):
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .header > span):
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section.modified > .header > span::after):
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content):
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row):
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row:last-child):
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row.visual-style-separated-row):
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row > .visual-style-property-container > .visual-style-property-title):
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row > .visual-style-property-container:not(.layout-reversed):last-child):
+ (.sidebar > .panel.details.css-style .visual.disabled > .details-section:not(.visual-style-selector-section)):
+ (.sidebar > .panel.details.css-style .visual.disabled > .details-section:not(.visual-style-selector-section) input):
+
+ * UserInterface/Views/VisualStyleDetailsPanel.js: Added.
+ (WebInspector.VisualStyleDetailsPanel):
+ (WebInspector.VisualStyleDetailsPanel.prototype.refresh):
+ (WebInspector.VisualStyleDetailsPanel.prototype._generateSection.replaceDashWithCapital):
+ (WebInspector.VisualStyleDetailsPanel.prototype._generateSection.createOptionsElement):
+ (WebInspector.VisualStyleDetailsPanel.prototype._generateSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._prepareForChange):
+ (WebInspector.VisualStyleDetailsPanel.prototype._updateSections):
+ (WebInspector.VisualStyleDetailsPanel.prototype._updateProperties):
+ (WebInspector.VisualStyleDetailsPanel.prototype._updateAutocompleteCompatiblePropertyEditor):
+ (WebInspector.VisualStyleDetailsPanel.prototype._sectionModified):
+ (WebInspector.VisualStyleDetailsPanel.prototype._clearModifiedSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype.get _initialTextList):
+ (WebInspector.VisualStyleDetailsPanel.prototype._initialPropertyTextModified):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateDisplaySection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._generateMetricSectionRows):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populatePositionSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateFloatSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._addMetricsMouseListeners.onEditorMouseover):
+ (WebInspector.VisualStyleDetailsPanel.prototype._addMetricsMouseListeners.onEditorMouseout):
+ (WebInspector.VisualStyleDetailsPanel.prototype._addMetricsMouseListeners):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateDimensionsSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateMarginSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populatePaddingSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateFlexboxSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateTextStyleSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateFontSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateTextSpacingSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateTextShadowSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateBackgroundStyleSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateBorderSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateOutlineSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateBoxShadowSection.noRemainingTreeItems):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateBoxShadowSection.selectedBoxShadowItemValueChanged):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateBoxShadowSection.boxShadowItemSelected):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateBoxShadowSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateTransitionSection.noRemainingTreeItems):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateTransitionSection.selectedtransitionItemValueChanged):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateTransitionSection.transitionItemSelected):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateTransitionSection):
+
+2015-12-02 Timothy Hatcher <timothy@apple.com>
+
</ins><span class="cx"> Merge r188496. 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="branchessafari601branchSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (193111 => 193112)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js        2015-12-03 18:47:45 UTC (rev 193111)
+++ branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js        2015-12-03 18:47:57 UTC (rev 193112)
</span><span class="lines">@@ -32,6 +32,8 @@
</span><span class="cx"> localizedStrings["(Index)"] = "(Index)";
</span><span class="cx"> localizedStrings["(anonymous function)"] = "(anonymous function)";
</span><span class="cx"> localizedStrings["(many)"] = "(many)";
</span><ins>+localizedStrings["(modify the boxes below to add a value)"] = "(modify the boxes below to add a value)";
+localizedStrings["(multiple)"] = "(multiple)";
</ins><span class="cx"> localizedStrings["(program)"] = "(program)";
</span><span class="cx"> localizedStrings["(uninitialized)"] = "(uninitialized)";
</span><span class="cx"> localizedStrings[", "] = ", ";
</span><span class="lines">@@ -49,6 +51,7 @@
</span><span class="cx"> localizedStrings["Add Watch Expression"] = "Add Watch Expression";
</span><span class="cx"> localizedStrings["Add new breakpoint action after this action"] = "Add new breakpoint action after this action";
</span><span class="cx"> localizedStrings["Additions"] = "Additions";
</span><ins>+localizedStrings["Align"] = "Align";
</ins><span class="cx"> localizedStrings["All"] = "All";
</span><span class="cx"> localizedStrings["All Changes"] = "All Changes";
</span><span class="cx"> localizedStrings["All Exceptions"] = "All Exceptions";
</span><span class="lines">@@ -60,6 +63,7 @@
</span><span class="cx"> localizedStrings["An unexpected error %s occurred."] = "An unexpected error %s occurred.";
</span><span class="cx"> localizedStrings["An unexpected error occurred."] = "An unexpected error occurred.";
</span><span class="cx"> localizedStrings["Angle"] = "Angle";
</span><ins>+localizedStrings["Animation"] = "Animation";
</ins><span class="cx"> localizedStrings["Animation Frame Canceled"] = "Animation Frame Canceled";
</span><span class="cx"> localizedStrings["Animation Frame Fired"] = "Animation Frame Fired";
</span><span class="cx"> localizedStrings["Animation Frame Requested"] = "Animation Frame Requested";
</span><span class="lines">@@ -72,13 +76,19 @@
</span><span class="cx"> localizedStrings["Assertion Failed: %s"] = "Assertion Failed: %s";
</span><span class="cx"> localizedStrings["Assertion with message: %s"] = "Assertion with message: %s";
</span><span class="cx"> localizedStrings["Assertive"] = "Assertive";
</span><ins>+localizedStrings["Attach"] = "Attach";
</ins><span class="cx"> localizedStrings["Attribute"] = "Attribute";
</span><span class="cx"> localizedStrings["Attributes"] = "Attributes";
</span><span class="cx"> localizedStrings["Author Stylesheet"] = "Author Stylesheet";
</span><span class="cx"> localizedStrings["Automatically continue after evaluating"] = "Automatically continue after evaluating";
</span><span class="cx"> localizedStrings["Average Time"] = "Average Time";
</span><span class="cx"> localizedStrings["Back (%s)"] = "Back (%s)";
</span><ins>+localizedStrings["Background"] = "Background";
+localizedStrings["Basis"] = "Basis";
</ins><span class="cx"> localizedStrings["Begin Capturing"] = "Begin Capturing";
</span><ins>+localizedStrings["Blur"] = "Blur";
+localizedStrings["Border"] = "Border";
+localizedStrings["Bottom"] = "Bottom";
</ins><span class="cx"> localizedStrings["Boundary"] = "Boundary";
</span><span class="cx"> localizedStrings["Box Model"] = "Box Model";
</span><span class="cx"> localizedStrings["Bubbling"] = "Bubbling";
</span><span class="lines">@@ -93,6 +103,7 @@
</span><span class="cx"> localizedStrings["Checked"] = "Checked";
</span><span class="cx"> localizedStrings["Child Layers"] = "Child Layers";
</span><span class="cx"> localizedStrings["Children"] = "Children";
</span><ins>+localizedStrings["Clear"] = "Clear";
</ins><span class="cx"> localizedStrings["Clear All Watch Expressions"] = "Clear All Watch Expressions";
</span><span class="cx"> localizedStrings["Clear Log"] = "Clear Log";
</span><span class="cx"> localizedStrings["Clear Log on Navigation"] = "Clear Log on Navigation";
</span><span class="lines">@@ -101,13 +112,16 @@
</span><span class="cx"> localizedStrings["Click Listener"] = "Click Listener";
</span><span class="cx"> localizedStrings["Click or press the spacebar to record."] = "Click or press the spacebar to record.";
</span><span class="cx"> localizedStrings["Click or press the spacebar to stop recording."] = "Click or press the spacebar to stop recording.";
</span><ins>+localizedStrings["Click to add a new item."] = "Click to add a new item.";
</ins><span class="cx"> localizedStrings["Click to add a new rule."] = "Click to add a new rule.";
</span><ins>+localizedStrings["Click to clear modified properties"] = "Click to clear modified properties";
</ins><span class="cx"> localizedStrings["Click to close this tab"] = "Click to close this tab";
</span><span class="cx"> localizedStrings["Click to disable the selected rule"] = "Click to disable the selected rule";
</span><span class="cx"> localizedStrings["Click to enable the selected rule"] = "Click to enable the selected rule";
</span><span class="cx"> localizedStrings["Click to link property values"] = "Click to link property values";
</span><span class="cx"> localizedStrings["Click to open a cubic-bezier editor"] = "Click to open a cubic-bezier editor";
</span><span class="cx"> localizedStrings["Click to remove link"] = "Click to remove link";
</span><ins>+localizedStrings["Click to remove the selected item."] = "Click to remove the selected item.";
</ins><span class="cx"> localizedStrings["Click to restart the animation"] = "Click to restart the animation";
</span><span class="cx"> localizedStrings["Click to select a color. Shift-click to switch color formats."] = "Click to select a color. Shift-click to switch color formats.";
</span><span class="cx"> localizedStrings["Clickable"] = "Clickable";
</span><span class="lines">@@ -119,6 +133,7 @@
</span><span class="cx"> localizedStrings["Closure Variables"] = "Closure Variables";
</span><span class="cx"> localizedStrings["Code"] = "Code";
</span><span class="cx"> localizedStrings["Collapse columns"] = "Collapse columns";
</span><ins>+localizedStrings["Color"] = "Color";
</ins><span class="cx"> localizedStrings["Comment"] = "Comment";
</span><span class="cx"> localizedStrings["Comment All Properties"] = "Comment All Properties";
</span><span class="cx"> localizedStrings["Composite"] = "Composite";
</span><span class="lines">@@ -145,6 +160,8 @@
</span><span class="cx"> localizedStrings["Copy as HTML"] = "Copy as HTML";
</span><span class="cx"> localizedStrings["Could not fetch properties. Object may no longer exist."] = "Could not fetch properties. Object may no longer exist.";
</span><span class="cx"> localizedStrings["Create a new tab"] = "Create a new tab";
</span><ins>+localizedStrings["Cursor"] = "Cursor";
+localizedStrings["Custom"] = "Custom";
</ins><span class="cx"> localizedStrings["Data"] = "Data";
</span><span class="cx"> localizedStrings["Data returned from the database is too large."] = "Data returned from the database is too large.";
</span><span class="cx"> localizedStrings["Database no longer has expected version."] = "Database no longer has expected version.";
</span><span class="lines">@@ -154,6 +171,9 @@
</span><span class="cx"> localizedStrings["Debugger Paused"] = "Debugger Paused";
</span><span class="cx"> localizedStrings["Debugger Statement"] = "Debugger Statement";
</span><span class="cx"> localizedStrings["Decoded"] = "Decoded";
</span><ins>+localizedStrings["Decoration"] = "Decoration";
+localizedStrings["Default"] = "Default";
+localizedStrings["Delay"] = "Delay";
</ins><span class="cx"> localizedStrings["Delete"] = "Delete";
</span><span class="cx"> localizedStrings["Delete Breakpoint"] = "Delete Breakpoint";
</span><span class="cx"> localizedStrings["Delete Breakpoints"] = "Delete Breakpoints";
</span><span class="lines">@@ -161,12 +181,15 @@
</span><span class="cx"> localizedStrings["Detach into separate window"] = "Detach into separate window";
</span><span class="cx"> localizedStrings["Details"] = "Details";
</span><span class="cx"> localizedStrings["Did you mean '%s'?\nClick to replace."] = "Did you mean '%s'?\nClick to replace.";
</span><ins>+localizedStrings["Dimensions"] = "Dimensions";
+localizedStrings["Direction"] = "Direction";
</ins><span class="cx"> localizedStrings["Disable Breakpoint"] = "Disable Breakpoint";
</span><span class="cx"> localizedStrings["Disable Breakpoints"] = "Disable Breakpoints";
</span><span class="cx"> localizedStrings["Disable all breakpoints (%s)"] = "Disable all breakpoints (%s)";
</span><span class="cx"> localizedStrings["Disable paint flashing"] = "Disable paint flashing";
</span><span class="cx"> localizedStrings["Disable point to inspect mode (%s)"] = "Disable point to inspect mode (%s)";
</span><span class="cx"> localizedStrings["Disabled"] = "Disabled";
</span><ins>+localizedStrings["Display"] = "Display";
</ins><span class="cx"> localizedStrings["Dock to bottom of window"] = "Dock to bottom of window";
</span><span class="cx"> localizedStrings["Dock to right of window"] = "Dock to right of window";
</span><span class="cx"> localizedStrings["Document"] = "Document";
</span><span class="lines">@@ -237,6 +260,7 @@
</span><span class="cx"> localizedStrings["Expression"] = "Expression";
</span><span class="cx"> localizedStrings["Extension Scripts"] = "Extension Scripts";
</span><span class="cx"> localizedStrings["Extra Scripts"] = "Extra Scripts";
</span><ins>+localizedStrings["Family"] = "Family";
</ins><span class="cx"> localizedStrings["Filename"] = "Filename";
</span><span class="cx"> localizedStrings["Filter %s"] = "Filter %s";
</span><span class="cx"> localizedStrings["Filter Breakpoint List"] = "Filter Breakpoint List";
</span><span class="lines">@@ -245,6 +269,9 @@
</span><span class="cx"> localizedStrings["Filter Search Results"] = "Filter Search Results";
</span><span class="cx"> localizedStrings["Filter Storage List"] = "Filter Storage List";
</span><span class="cx"> localizedStrings["Filter Styles"] = "Filter Styles";
</span><ins>+localizedStrings["Flexbox"] = "Flexbox";
+localizedStrings["Float"] = "Float";
+localizedStrings["Float and Clear"] = "Float and Clear";
</ins><span class="cx"> localizedStrings["Flows"] = "Flows";
</span><span class="cx"> localizedStrings["Focused"] = "Focused";
</span><span class="cx"> localizedStrings["Font"] = "Font";
</span><span class="lines">@@ -267,6 +294,7 @@
</span><span class="cx"> localizedStrings["Global Variables"] = "Global Variables";
</span><span class="cx"> localizedStrings["Grammar"] = "Grammar";
</span><span class="cx"> localizedStrings["Group"] = "Group";
</span><ins>+localizedStrings["Grow"] = "Grow";
</ins><span class="cx"> localizedStrings["HTML Attributes"] = "HTML Attributes";
</span><span class="cx"> localizedStrings["HTTP"] = "HTTP";
</span><span class="cx"> localizedStrings["Height"] = "Height";
</span><span class="lines">@@ -276,6 +304,7 @@
</span><span class="cx"> localizedStrings["Hide the details sidebar (%s)"] = "Hide the details sidebar (%s)";
</span><span class="cx"> localizedStrings["Hide the navigation sidebar (%s)"] = "Hide the navigation sidebar (%s)";
</span><span class="cx"> localizedStrings["Hide type information"] = "Hide type information";
</span><ins>+localizedStrings["Horizontal"] = "Horizontal";
</ins><span class="cx"> localizedStrings["Host"] = "Host";
</span><span class="cx"> localizedStrings["Icon Only"] = "Icon Only";
</span><span class="cx"> localizedStrings["Icon and Text (Horizontal)"] = "Icon and Text (Horizontal)";
</span><span class="lines">@@ -286,6 +315,7 @@
</span><span class="cx"> localizedStrings["Image Size"] = "Image Size";
</span><span class="cx"> localizedStrings["Images"] = "Images";
</span><span class="cx"> localizedStrings["Immediate Pause Requested"] = "Immediate Pause Requested";
</span><ins>+localizedStrings["Indent"] = "Indent";
</ins><span class="cx"> localizedStrings["Index"] = "Index";
</span><span class="cx"> localizedStrings["Index Key \u2014 %s"] = "Index Key \u2014 %s";
</span><span class="cx"> localizedStrings["Indexed Databases"] = "Indexed Databases";
</span><span class="lines">@@ -294,6 +324,7 @@
</span><span class="cx"> localizedStrings["Inherited from %s"] = "Inherited from %s";
</span><span class="cx"> localizedStrings["Initiator"] = "Initiator";
</span><span class="cx"> localizedStrings["Input: "] = "Input: ";
</span><ins>+localizedStrings["Inset"] = "Inset";
</ins><span class="cx"> localizedStrings["Invalid"] = "Invalid";
</span><span class="cx"> localizedStrings["Invoke getter"] = "Invoke getter";
</span><span class="cx"> localizedStrings["JavaScript & Events"] = "JavaScript & Events";
</span><span class="lines">@@ -309,6 +340,8 @@
</span><span class="cx"> localizedStrings["Layout"] = "Layout";
</span><span class="cx"> localizedStrings["Layout & Rendering"] = "Layout & Rendering";
</span><span class="cx"> localizedStrings["Layout Invalidated"] = "Layout Invalidated";
</span><ins>+localizedStrings["Left"] = "Left";
+localizedStrings["Letter"] = "Letter";
</ins><span class="cx"> localizedStrings["Line %d"] = "Line %d";
</span><span class="cx"> localizedStrings["Line %d:%d"] = "Line %d:%d";
</span><span class="cx"> localizedStrings["Line Number"] = "Line Number";
</span><span class="lines">@@ -328,11 +361,14 @@
</span><span class="cx"> localizedStrings["MIME Type"] = "MIME Type";
</span><span class="cx"> localizedStrings["Main Frame"] = "Main Frame";
</span><span class="cx"> localizedStrings["Manifest URL"] = "Manifest URL";
</span><ins>+localizedStrings["Margin"] = "Margin";
+localizedStrings["Max"] = "Max";
</ins><span class="cx"> localizedStrings["Media: "] = "Media: ";
</span><span class="cx"> localizedStrings["Memory"] = "Memory";
</span><span class="cx"> localizedStrings["Memory: %s"] = "Memory: %s";
</span><span class="cx"> localizedStrings["Message"] = "Message";
</span><span class="cx"> localizedStrings["Method"] = "Method";
</span><ins>+localizedStrings["Min"] = "Min";
</ins><span class="cx"> localizedStrings["Mixed"] = "Mixed";
</span><span class="cx"> localizedStrings["Name"] = "Name";
</span><span class="cx"> localizedStrings["Network"] = "Network";
</span><span class="lines">@@ -368,19 +404,25 @@
</span><span class="cx"> localizedStrings["No properties."] = "No properties.";
</span><span class="cx"> localizedStrings["Node"] = "Node";
</span><span class="cx"> localizedStrings["Not found"] = "Not found";
</span><ins>+localizedStrings["Offset"] = "Offset";
</ins><span class="cx"> localizedStrings["Online"] = "Online";
</span><ins>+localizedStrings["Opacity"] = "Opacity";
</ins><span class="cx"> localizedStrings["Option-click to show all units"] = "Option-click to show all units";
</span><span class="cx"> localizedStrings["Option-click to show all values"] = "Option-click to show all values";
</span><span class="cx"> localizedStrings["Options"] = "Options";
</span><ins>+localizedStrings["Order"] = "Order";
</ins><span class="cx"> localizedStrings["Original"] = "Original";
</span><span class="cx"> localizedStrings["Original formatting"] = "Original formatting";
</span><span class="cx"> localizedStrings["Originally %s"] = "Originally %s";
</span><span class="cx"> localizedStrings["Other"] = "Other";
</span><span class="cx"> localizedStrings["Other Issue"] = "Other Issue";
</span><ins>+localizedStrings["Outline"] = "Outline";
</ins><span class="cx"> localizedStrings["Output: "] = "Output: ";
</span><span class="cx"> localizedStrings["Over 1 ms"] = "Over 1 ms";
</span><span class="cx"> localizedStrings["Over 15 ms"] = "Over 15 ms";
</span><ins>+localizedStrings["Overflow"] = "Overflow";
</ins><span class="cx"> localizedStrings["Owns"] = "Owns";
</span><ins>+localizedStrings["Padding"] = "Padding";
</ins><span class="cx"> localizedStrings["Page Issue"] = "Page Issue";
</span><span class="cx"> localizedStrings["Paint"] = "Paint";
</span><span class="cx"> localizedStrings["Paints"] = "Paints";
</span><span class="lines">@@ -392,6 +434,9 @@
</span><span class="cx"> localizedStrings["Play Sound"] = "Play Sound";
</span><span class="cx"> localizedStrings["Polite"] = "Polite";
</span><span class="cx"> localizedStrings["Port"] = "Port";
</span><ins>+localizedStrings["Position"] = "Position";
+localizedStrings["Position X"] = "Position X";
+localizedStrings["Position Y"] = "Position Y";
</ins><span class="cx"> localizedStrings["Pressed"] = "Pressed";
</span><span class="cx"> localizedStrings["Pretty print"] = "Pretty print";
</span><span class="cx"> localizedStrings["Primary Key"] = "Primary Key";
</span><span class="lines">@@ -401,9 +446,11 @@
</span><span class="cx"> localizedStrings["Probes"] = "Probes";
</span><span class="cx"> localizedStrings["Processing Instruction"] = "Processing Instruction";
</span><span class="cx"> localizedStrings["Properties"] = "Properties";
</span><ins>+localizedStrings["Property"] = "Property";
</ins><span class="cx"> localizedStrings["Query Parameters"] = "Query Parameters";
</span><span class="cx"> localizedStrings["Query String"] = "Query String";
</span><span class="cx"> localizedStrings["Radial Gradient"] = "Radial Gradient";
</span><ins>+localizedStrings["Radius"] = "Radius";
</ins><span class="cx"> localizedStrings["Range Issue"] = "Range Issue";
</span><span class="cx"> localizedStrings["Readonly"] = "Readonly";
</span><span class="cx"> localizedStrings["Reasons for compositing:"] = "Reasons for compositing:";
</span><span class="lines">@@ -420,6 +467,7 @@
</span><span class="cx"> localizedStrings["Remove Watch Expression"] = "Remove Watch Expression";
</span><span class="cx"> localizedStrings["Remove this breakpoint action"] = "Remove this breakpoint action";
</span><span class="cx"> localizedStrings["Rendering Frames"] = "Rendering Frames";
</span><ins>+localizedStrings["Repeat"] = "Repeat";
</ins><span class="cx"> localizedStrings["Repeating Linear Gradient"] = "Repeating Linear Gradient";
</span><span class="cx"> localizedStrings["Repeating Radial Gradient"] = "Repeating Radial Gradient";
</span><span class="cx"> localizedStrings["Request"] = "Request";
</span><span class="lines">@@ -439,6 +487,7 @@
</span><span class="cx"> localizedStrings["Reveal in DOM Tree"] = "Reveal in DOM Tree";
</span><span class="cx"> localizedStrings["Reveal in Debugger Tab"] = "Reveal in Debugger Tab";
</span><span class="cx"> localizedStrings["Reveal in Original Resource"] = "Reveal in Original Resource";
</span><ins>+localizedStrings["Right"] = "Right";
</ins><span class="cx"> localizedStrings["Role"] = "Role";
</span><span class="cx"> localizedStrings["Scheme"] = "Scheme";
</span><span class="cx"> localizedStrings["Scope Chain"] = "Scope Chain";
</span><span class="lines">@@ -464,11 +513,13 @@
</span><span class="cx"> localizedStrings["Set to Automatically Continue"] = "Set to Automatically Continue";
</span><span class="cx"> localizedStrings["Setter"] = "Setter";
</span><span class="cx"> localizedStrings["Settings"] = "Settings";
</span><ins>+localizedStrings["Shadow"] = "Shadow";
</ins><span class="cx"> localizedStrings["Shadow Content"] = "Shadow Content";
</span><span class="cx"> localizedStrings["Shared Focus"] = "Shared Focus";
</span><span class="cx"> localizedStrings["Show All"] = "Show All";
</span><span class="cx"> localizedStrings["Show All Nodes (%d More)"] = "Show All Nodes (%d More)";
</span><span class="cx"> localizedStrings["Show Replay Controls"] = "Show Replay Controls";
</span><ins>+localizedStrings["Show Source"] = "Show Source";
</ins><span class="cx"> localizedStrings["Show compositing borders"] = "Show compositing borders";
</span><span class="cx"> localizedStrings["Show console tab"] = "Show console tab";
</span><span class="cx"> localizedStrings["Show only resources with breakpoints."] = "Show only resources with breakpoints.";
</span><span class="lines">@@ -479,13 +530,17 @@
</span><span class="cx"> localizedStrings["Show the details sidebar (%s)"] = "Show the details sidebar (%s)";
</span><span class="cx"> localizedStrings["Show the navigation sidebar (%s)"] = "Show the navigation sidebar (%s)";
</span><span class="cx"> localizedStrings["Show type information"] = "Show type information";
</span><ins>+localizedStrings["Shrink"] = "Shrink";
</ins><span class="cx"> localizedStrings["Size"] = "Size";
</span><ins>+localizedStrings["Sizing"] = "Sizing";
</ins><span class="cx"> localizedStrings["Small Icons"] = "Small Icons";
</span><span class="cx"> localizedStrings["Socket"] = "Socket";
</span><span class="cx"> localizedStrings["Sockets"] = "Sockets";
</span><ins>+localizedStrings["Spacing"] = "Spacing";
</ins><span class="cx"> localizedStrings["Specificity: (%d, %d, %d)"] = "Specificity: (%d, %d, %d)";
</span><span class="cx"> localizedStrings["Specificity: No value for selected element"] = "Specificity: No value for selected element";
</span><span class="cx"> localizedStrings["Spelling"] = "Spelling";
</span><ins>+localizedStrings["Spread"] = "Spread";
</ins><span class="cx"> localizedStrings["Start Playback"] = "Start Playback";
</span><span class="cx"> localizedStrings["Start Recording"] = "Start Recording";
</span><span class="cx"> localizedStrings["Start Time"] = "Start Time";
</span><span class="lines">@@ -503,6 +558,7 @@
</span><span class="cx"> localizedStrings["Styles Recalculated"] = "Styles Recalculated";
</span><span class="cx"> localizedStrings["Styles \u2014 Computed"] = "Styles \u2014 Computed";
</span><span class="cx"> localizedStrings["Styles \u2014 Rules"] = "Styles \u2014 Rules";
</span><ins>+localizedStrings["Styles \u2014 Visual"] = "Styles \u2014 Visual";
</ins><span class="cx"> localizedStrings["Stylesheet"] = "Stylesheet";
</span><span class="cx"> localizedStrings["Stylesheets"] = "Stylesheets";
</span><span class="cx"> localizedStrings["Text"] = "Text";
</span><span class="lines">@@ -527,10 +583,14 @@
</span><span class="cx"> localizedStrings["Timer Fired"] = "Timer Fired";
</span><span class="cx"> localizedStrings["Timer Installed"] = "Timer Installed";
</span><span class="cx"> localizedStrings["Timer Removed"] = "Timer Removed";
</span><ins>+localizedStrings["Timing"] = "Timing";
+localizedStrings["Top"] = "Top";
</ins><span class="cx"> localizedStrings["Total Time"] = "Total Time";
</span><span class="cx"> localizedStrings["Total number of resources, click to show the Resources tab"] = "Total number of resources, click to show the Resources tab";
</span><span class="cx"> localizedStrings["Total size of all resources, click to show the Network Requests timeline"] = "Total size of all resources, click to show the Network Requests timeline";
</span><span class="cx"> localizedStrings["Transfered"] = "Transfered";
</span><ins>+localizedStrings["Transform"] = "Transform";
+localizedStrings["Transition"] = "Transition";
</ins><span class="cx"> localizedStrings["Triggered Breakpoint"] = "Triggered Breakpoint";
</span><span class="cx"> localizedStrings["Type"] = "Type";
</span><span class="cx"> localizedStrings["Type Issue"] = "Type Issue";
</span><span class="lines">@@ -544,16 +604,24 @@
</span><span class="cx"> localizedStrings["User Stylesheet"] = "User Stylesheet";
</span><span class="cx"> localizedStrings["Using the previous selector '%s'."] = "Using the previous selector '%s'.";
</span><span class="cx"> localizedStrings["Value"] = "Value";
</span><ins>+localizedStrings["Variant"] = "Variant";
+localizedStrings["Vertical"] = "Vertical";
+localizedStrings["Visibility"] = "Visibility";
</ins><span class="cx"> localizedStrings["Warning: "] = "Warning: ";
</span><span class="cx"> localizedStrings["Warnings"] = "Warnings";
</span><span class="cx"> localizedStrings["Watch Expressions"] = "Watch Expressions";
</span><span class="cx"> localizedStrings["Web Inspector"] = "Web Inspector";
</span><ins>+localizedStrings["Weight"] = "Weight";
+localizedStrings["Whitespace"] = "Whitespace";
</ins><span class="cx"> localizedStrings["Width"] = "Width";
</span><span class="cx"> localizedStrings["With Object Properties"] = "With Object Properties";
</span><ins>+localizedStrings["Word"] = "Word";
</ins><span class="cx"> localizedStrings["Working Copy"] = "Working Copy";
</span><ins>+localizedStrings["Wrap"] = "Wrap";
</ins><span class="cx"> localizedStrings["XHR"] = "XHR";
</span><span class="cx"> localizedStrings["XHRs"] = "XHRs";
</span><span class="cx"> localizedStrings["Yes"] = "Yes";
</span><ins>+localizedStrings["Z-Index"] = "Z-Index";
</ins><span class="cx"> localizedStrings["key"] = "key";
</span><span class="cx"> localizedStrings["line "] = "line ";
</span><span class="cx"> localizedStrings["originally %s"] = "originally %s";
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html (193111 => 193112)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html        2015-12-03 18:47:45 UTC (rev 193111)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html        2015-12-03 18:47:57 UTC (rev 193112)
</span><span class="lines">@@ -163,6 +163,20 @@
</span><span class="cx"> <link rel="stylesheet" href="Views/TypeTokenView.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/TypeTreeElement.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/TypeTreeView.css">
</span><ins>+ <link rel="stylesheet" href="Views/VisualStyleColorPicker.css">
+ <link rel="stylesheet" href="Views/VisualStyleCommaSeparatedKeywordEditor.css">
+ <link rel="stylesheet" href="Views/VisualStyleDetailsPanel.css">
+ <link rel="stylesheet" href="Views/VisualStyleKeywordCheckbox.css">
+ <link rel="stylesheet" href="Views/VisualStyleKeywordIconList.css">
+ <link rel="stylesheet" href="Views/VisualStyleNumberInputBox.css">
+ <link rel="stylesheet" href="Views/VisualStylePropertyEditor.css">
+ <link rel="stylesheet" href="Views/VisualStylePropertyEditorLink.css">
+ <link rel="stylesheet" href="Views/VisualStyleRelativeNumberSlider.css">
+ <link rel="stylesheet" href="Views/VisualStyleSelectorSection.css">
+ <link rel="stylesheet" href="Views/VisualStyleSelectorTreeItem.css">
+ <link rel="stylesheet" href="Views/VisualStyleTabbedPropertiesRow.css">
+ <link rel="stylesheet" href="Views/VisualStyleTimingEditor.css">
+ <link rel="stylesheet" href="Views/VisualStyleUnitSlider.css">
</ins><span class="cx">
</span><span class="cx"> <link rel="stylesheet" href="Controllers/CodeMirrorCompletionController.css">
</span><span class="cx"> <link rel="stylesheet" href="Controllers/CodeMirrorDragToAdjustNumberController.css">
</span><span class="lines">@@ -541,6 +555,27 @@
</span><span class="cx"> <script src="Views/TypeTreeElement.js"></script>
</span><span class="cx"> <script src="Views/TypeTreeView.js"></script>
</span><span class="cx">
</span><ins>+ <script src="Views/VisualStyleDetailsPanel.js"></script>
+ <script src="Views/VisualStylePropertyEditor.js"></script>
+ <script src="Views/VisualStyleColorPicker.js"></script>
+ <script src="Views/VisualStyleCommaSeparatedKeywordEditor.js"></script>
+ <script src="Views/VisualStyleFontFamilyListEditor.js"></script>
+ <script src="Views/VisualStyleFontFamilyTreeElement.js"></script>
+ <script src="Views/VisualStyleKeywordCheckbox.js"></script>
+ <script src="Views/VisualStyleKeywordIconList.js"></script>
+ <script src="Views/VisualStyleKeywordPicker.js"></script>
+ <script src="Views/VisualStyleNumberInputBox.js"></script>
+ <script src="Views/VisualStylePropertyCombiner.js"></script>
+ <script src="Views/VisualStylePropertyEditorLink.js"></script>
+ <script src="Views/VisualStylePropertyNameInput.js"></script>
+ <script src="Views/VisualStyleRelativeNumberSlider.js"></script>
+ <script src="Views/VisualStyleSelectorSection.js"></script>
+ <script src="Views/VisualStyleSelectorTreeItem.js"></script>
+ <script src="Views/VisualStyleTabbedPropertiesRow.js"></script>
+ <script src="Views/VisualStyleTimingEditor.js"></script>
+ <script src="Views/VisualStyleUnitSlider.js"></script>
+ <script src="Views/VisualStyleURLInput.js"></script>
+
</ins><span class="cx"> <script src="Controllers/Annotator.js"></script>
</span><span class="cx"> <script src="Controllers/CodeMirrorEditingController.js"></script>
</span><span class="cx">
</span><span class="lines">@@ -575,6 +610,7 @@
</span><span class="cx"> <script src="Controllers/StorageManager.js"></script>
</span><span class="cx"> <script src="Controllers/TimelineManager.js"></script>
</span><span class="cx"> <script src="Controllers/TypeTokenAnnotator.js"></script>
</span><ins>+ <script src="Controllers/VisualStyleCompletionsController.js"></script>
</ins><span class="cx">
</span><span class="cx"> <script src="Base/Main.js"></script>
</span><span class="cx">
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (193111 => 193112)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js        2015-12-03 18:47:45 UTC (rev 193111)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js        2015-12-03 18:47:57 UTC (rev 193112)
</span><span class="lines">@@ -68,12 +68,13 @@
</span><span class="cx">
</span><span class="cx"> this._computedStyleDetailsPanel = new WebInspector.ComputedStyleDetailsPanel(this);
</span><span class="cx"> this._rulesStyleDetailsPanel = new WebInspector.RulesStyleDetailsPanel(this);
</span><ins>+ this._visualStyleDetailsPanel = new WebInspector.VisualStyleDetailsPanel(this);
</ins><span class="cx">
</span><span class="cx"> this._computedStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
</span><span class="cx"> this._rulesStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
</span><span class="cx">
</span><del>- this._panels = [this._computedStyleDetailsPanel, this._rulesStyleDetailsPanel];
- this._panelNavigationInfo = [this._computedStyleDetailsPanel.navigationInfo, this._rulesStyleDetailsPanel.navigationInfo];
</del><ins>+ this._panels = [this._computedStyleDetailsPanel, this._rulesStyleDetailsPanel, this._visualStyleDetailsPanel];
+ this._panelNavigationInfo = [this._computedStyleDetailsPanel.navigationInfo, this._rulesStyleDetailsPanel.navigationInfo, this._visualStyleDetailsPanel.navigationInfo];
</ins><span class="cx">
</span><span class="cx"> this._lastSelectedSectionSetting = new WebInspector.Setting("last-selected-style-details-panel", this._rulesStyleDetailsPanel.navigationInfo.identifier);
</span><span class="cx">
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsDetailsSectionjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js (193111 => 193112)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js        2015-12-03 18:47:45 UTC (rev 193111)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js        2015-12-03 18:47:57 UTC (rev 193112)
</span><span class="lines">@@ -61,6 +61,7 @@
</span><span class="cx">
</span><span class="cx"> this._collapsedSetting = new WebInspector.Setting(identifier + "-details-section-collapsed", !!defaultCollapsedSettingValue);
</span><span class="cx"> this.collapsed = this._collapsedSetting.value;
</span><ins>+ this._expandedByUser = false;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -115,6 +116,11 @@
</span><span class="cx"> this._contentElement.appendChild(this._groups[i].element);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ get expandedByUser()
+ {
+ return this._expandedByUser;
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _headerElementClicked(event)
</span><span class="lines">@@ -122,7 +128,9 @@
</span><span class="cx"> if (event.target.isSelfOrDescendant(this._optionsElement))
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- this.collapsed = !this.collapsed;
</del><ins>+ var collapsed = this.collapsed;
+ this.collapsed = !collapsed;
+ this._expandedByUser = collapsed;
</ins><span class="cx">
</span><span class="cx"> this._element.scrollIntoViewIfNeeded(false);
</span><span class="cx"> }
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPanelcss"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css (0 => 193112)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css         (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css        2015-12-03 18:47:57 UTC (rev 193112)
</span><span class="lines">@@ -0,0 +1,92 @@
</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.
+ */
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .header {
+ font-weight: normal;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .header > .visual-style-section-clear {
+ position: absolute;
+ right: 5px;
+ width: 15px;
+ height: 15px;
+ background-image: -webkit-canvas(navigation-item-clear-log-normal);
+ background-size: 15px 15px;
+ opacity: 0.7;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section.collapsed > .header > .visual-style-section-clear,
+.sidebar > .panel.details.css-style .visual > .details-section .details-section:not(.modified) > .header > .visual-style-section-clear {
+ display: none;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .header > span {
+ display: flex;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section.modified > .header > span::after {
+ width: 7px;
+ height: 7px;
+ margin: 4px 6px;
+ border-radius: 50%;
+ background-color: hsl(212, 92%, 54%);
+ opacity: 0.5;
+ content: "";
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content {
+ margin-top: 5px;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row {
+ display: flex;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row:last-child {
+ padding-bottom: 3px;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row.visual-style-separated-row {
+ border-bottom: 0.5px solid hsl(0, 0%, 83%);
+ margin-bottom: 5px;
+ padding-bottom: 2px;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row > .visual-style-property-container > .visual-style-property-title {
+ width: 55px;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row > .visual-style-property-container:not(.layout-reversed):last-child {
+ margin-right: 11px;
+}
+
+.sidebar > .panel.details.css-style .visual.disabled > .details-section:not(.visual-style-selector-section) {
+ opacity: 0.5;
+ pointer-events: none;
+}
+
+.sidebar > .panel.details.css-style .visual.disabled > .details-section:not(.visual-style-selector-section) input {
+ pointer-events: none;
+}
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js (0 => 193112)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js         (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js        2015-12-03 18:47:57 UTC (rev 193112)
</span><span class="lines">@@ -0,0 +1,1045 @@
</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.VisualStyleDetailsPanel = class VisualStyleDetailsPanel extends WebInspector.StyleDetailsPanel
+{
+ constructor(delegate)
+ {
+ super(delegate, "visual", "visual", WebInspector.UIString("Styles \u2014 Visual"));
+
+ WebInspector.propertyReferenceInfoTemp = {};
+ this._currentStyle = null;
+ this._forceNextStyleUpdate = false;
+
+ this._sections = {};
+ this._groups = {};
+ this._keywords = {};
+ this._units = {};
+ this._autocompletionPropertyEditors = {};
+
+ // These keywords, as well as the values below, are not localized as they must match the CSS spec.
+ this._keywords.defaults = ["Inherit", "Initial"];
+ this._keywords.boxModel = this._keywords.defaults.concat(["Auto"]);
+ this._keywords.borderStyle = {
+ basic: this._keywords.defaults.concat(["None", "Hidden", "Solid"]),
+ advanced: ["Dashed", "Dotted", "Double", "Groove", "Hidden", "Inset", "None", "Outset", "Ridge"]
+ };
+ this._keywords.borderWidth = this._keywords.defaults.concat(["Medium", "Thick", "Thin"]);
+
+ this._units.defaultsSansPercent = {
+ basic: ["px", "em"],
+ advanced: ["ch", "cm", "ex", "in", "mm", "pc", "pt", "rem", "vh", "vw", "vmax", "vmin"]
+ };
+ this._units.defaults = {
+ basic: ["%"].concat(this._units.defaultsSansPercent.basic),
+ advanced: this._units.defaultsSansPercent.advanced
+ };
+
+ // Selector Section
+ this._selectorSection = new WebInspector.VisualStyleSelectorSection(this);
+ this._selectorSection.addEventListener(WebInspector.VisualStyleSelectorSection.Event.SelectorChanged, this._updateSections, this);
+ this._selectorSection.addEventListener(WebInspector.VisualStyleSelectorSection.Event.StyleTextChanged, this._prepareForChange, this);
+ this._element.appendChild(this._selectorSection.element);
+
+ // Layout Section
+ this._generateSection("display", WebInspector.UIString("Display"));
+ this._generateSection("position", WebInspector.UIString("Position"));
+ this._generateSection("float", WebInspector.UIString("Float and Clear"));
+ this._generateSection("dimensions", WebInspector.UIString("Dimensions"));
+ this._generateSection("margin", WebInspector.UIString("Margin"));
+ this._generateSection("padding", WebInspector.UIString("Padding"));
+ this._generateSection("flexbox", WebInspector.UIString("Flexbox"));
+
+ this._sections.layout = new WebInspector.DetailsSection("layout", WebInspector.UIString("Layout"), [this._groups.display.section, this._groups.position.section, this._groups.float.section, this._groups.dimensions.section, this._groups.margin.section, this._groups.padding.section, this._groups.flexbox.section]);
+ this._element.appendChild(this._sections.layout.element);
+
+ // Text Section
+ this._generateSection("text-style", WebInspector.UIString("Style"));
+ this._generateSection("font", WebInspector.UIString("Font"));
+ this._generateSection("text-spacing", WebInspector.UIString("Spacing"));
+ this._generateSection("text-shadow", WebInspector.UIString("Shadow"));
+
+ this._sections.text = new WebInspector.DetailsSection("text", WebInspector.UIString("Text"), [this._groups.textStyle.section, this._groups.font.section, this._groups.textSpacing.section, this._groups.textShadow.section]);
+ this._element.appendChild(this._sections.text.element);
+
+ // Background Section
+ this._generateSection("background-style", WebInspector.UIString("Style"));
+ this._generateSection("border", WebInspector.UIString("Border"));
+ this._generateSection("outline", WebInspector.UIString("Outline"));
+ this._generateSection("box-shadow", WebInspector.UIString("Shadow"));
+
+ this._sections.background = new WebInspector.DetailsSection("background", WebInspector.UIString("Background"), [this._groups.backgroundStyle.section, this._groups.border.section, this._groups.outline.section, this._groups.boxShadow.section]);
+ this._element.appendChild(this._sections.background.element);
+
+ // Animation Section
+ this._generateSection("transition", WebInspector.UIString("Transition"));
+
+ this._sections.animation = new WebInspector.DetailsSection("animation", WebInspector.UIString("Animation"), [this._groups.transition.section]);
+ this._element.appendChild(this._sections.animation.element);
+ }
+
+ // Public
+
+ refresh(significantChange)
+ {
+ if (significantChange || this._forceNextStyleUpdate) {
+ this._selectorSection.update(this._nodeStyles);
+ this._updateSections();
+ this._forceNextStyleUpdate = false;
+ }
+
+ super.refresh();
+ }
+
+ // Private
+
+ _generateSection(id, displayName)
+ {
+ if (!id || !displayName)
+ return;
+
+ function replaceDashWithCapital(match) {
+ return match.replace("-", "").toUpperCase();
+ }
+
+ var camelCaseId = id.replace(/-\b\w/g, replaceDashWithCapital);
+
+ function createOptionsElement() {
+ var container = document.createElement("div");
+ container.classList.add("visual-style-section-clear");
+ container.title = WebInspector.UIString("Click to clear modified properties");
+ container.addEventListener("click", this._clearModifiedSection.bind(this, camelCaseId));
+ return container;
+ }
+
+ this._groups[camelCaseId] = {
+ section: new WebInspector.DetailsSection(id, displayName, [], createOptionsElement.call(this)),
+ properties: {}
+ };
+
+ var populateFunction = this["_populate" + camelCaseId.capitalize() + "Section"];
+ populateFunction.call(this);
+ }
+
+ _prepareForChange(event)
+ {
+ this._forceNextStyleUpdate = true;
+ }
+
+ _updateSections(event)
+ {
+ this._currentStyle = this._selectorSection.currentStyle();
+ if (!this._currentStyle)
+ return;
+
+ var disabled = this._currentStyle[WebInspector.VisualStyleDetailsPanel.StyleDisabledSymbol];
+ this._element.classList.toggle("disabled", disabled);
+ if (disabled)
+ return;
+
+ for (let key in this._groups)
+ this._updateProperties(this._groups[key], !!event);
+
+ for (let key in this._sections) {
+ var section = this._sections[key];
+ var oneSectionExpanded = false;
+ for (let group of section.groups) {
+ if (!group.collapsed) {
+ oneSectionExpanded = true;
+ break;
+ }
+ }
+
+ section.collapsed = !oneSectionExpanded;
+ }
+ }
+
+ _updateProperties(group, forceStyleUpdate)
+ {
+ if (!group.section)
+ return;
+
+ var initialTextList = this._initialTextList;
+ if (!initialTextList)
+ this._currentStyle[WebInspector.VisualStyleDetailsPanel.InitialPropertySectionTextListSymbol] = initialTextList = new WeakMap;
+
+ var initialPropertyText = {};
+ var initialPropertyTextMissing = !initialTextList.has(group);
+ var onePropertyHasValue = false;
+ for (let key in group.properties) {
+ var propertyEditor = group.properties[key];
+ propertyEditor.update(!propertyEditor.style || forceStyleUpdate ? this._currentStyle : null);
+
+ var value = propertyEditor.synthesizedValue;
+ if (value && !propertyEditor.propertyMissing) {
+ onePropertyHasValue = true;
+ if (initialPropertyTextMissing)
+ initialPropertyText[key] = value;
+ }
+ }
+
+ if (initialPropertyTextMissing)
+ initialTextList.set(group, initialPropertyText);
+
+ group.section.collapsed = !onePropertyHasValue && !group.section.expandedByUser;
+ this._sectionModified(group);
+
+ var autocompleteCompatibleProperties = group.autocompleteCompatibleProperties;
+ if (!autocompleteCompatibleProperties || !autocompleteCompatibleProperties.length)
+ return;
+
+ for (let editor of autocompleteCompatibleProperties)
+ this._updateAutocompleteCompatiblePropertyEditor(editor, forceStyleUpdate);
+ }
+
+ _updateAutocompleteCompatiblePropertyEditor(editor, force)
+ {
+ if (!editor || (editor.hasCompletions && !force))
+ return;
+
+ editor.completions = WebInspector.CSSKeywordCompletions.forProperty(editor.propertyReferenceName);
+ }
+
+ _sectionModified(group)
+ {
+ group.section.element.classList.toggle("modified", this._initialPropertyTextModified(group));
+ }
+
+ _clearModifiedSection(groupId)
+ {
+ var group = this._groups[groupId];
+ group.section.element.classList.remove("modified");
+ var initialPropertyTextList = this._currentStyle[WebInspector.VisualStyleDetailsPanel.InitialPropertySectionTextListSymbol].get(group);
+ if (!initialPropertyTextList)
+ return;
+
+ var newStyleText = this._currentStyle.text;
+ for (let key in group.properties) {
+ var propertyEditor = group.properties[key];
+ var initialValue = initialPropertyTextList[key] || null;
+ newStyleText = propertyEditor.modifyPropertyText(newStyleText, initialValue);
+ propertyEditor.resetEditorValues(initialValue);
+ }
+
+ this._currentStyle.text = newStyleText;
+ }
+
+ get _initialTextList()
+ {
+ return this._currentStyle[WebInspector.VisualStyleDetailsPanel.InitialPropertySectionTextListSymbol];
+ }
+
+ _initialPropertyTextModified(group)
+ {
+ if (!group.properties)
+ return false;
+
+ var initialPropertyTextList = this._initialTextList.get(group);
+ if (!initialPropertyTextList)
+ return false;
+
+ for (let key in group.properties) {
+ var propertyEditor = group.properties[key];
+ if (propertyEditor.propertyMissing)
+ continue;
+
+ var value = propertyEditor.synthesizedValue;
+ if (value && initialPropertyTextList[key] !== value)
+ return true;
+ }
+
+ return false;
+ }
+
+ _populateSection(group, groups)
+ {
+ if (!group || !groups)
+ return;
+
+ group.section.groups = groups;
+ for (let key in group.properties)
+ group.properties[key].addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, this._sectionModified.bind(this, group));
+ }
+
+ _populateDisplaySection()
+ {
+ var group = this._groups.display;
+ var properties = group.properties;
+
+ var displayRow = new WebInspector.DetailsSectionRow;
+
+ properties.display = new WebInspector.VisualStyleKeywordPicker("display", WebInspector.UIString("Type"), {
+ basic: ["None", "Block", "Flex", "Inline", "Inline Block"],
+ advanced: ["Compact", "Inline Flex", "Inline Table", "List Item", "Table", "Table Caption", "Table Cell", "Table Column", "Table Column Group", "Table Footer Group", "Table Header Group", "Table Row", "Table Row Group", " WAP Marquee", " WebKit Box", " WebKit Grid", " WebKit Inline Box", " WebKit Inline Grid"]
+ });
+ properties.visibility = new WebInspector.VisualStyleKeywordPicker("visibility", WebInspector.UIString("Visibility"), {
+ basic: ["Hidden", "Visible"],
+ advanced: ["Collapse"]
+ });
+
+ displayRow.element.appendChild(properties.display.element);
+ displayRow.element.appendChild(properties.visibility.element);
+
+ var sizingRow = new WebInspector.DetailsSectionRow;
+
+ properties.boxSizing = new WebInspector.VisualStyleKeywordPicker("box-sizing", WebInspector.UIString("Sizing"), this._keywords.defaults.concat(["Border Box", "Content Box"]));
+ properties.cursor = new WebInspector.VisualStyleKeywordPicker("cursor", WebInspector.UIString("Cursor"), {
+ basic: ["Auto", "Default", "None", "Pointer", "Crosshair", "Text"],
+ advanced: ["Context Menu", "Help", "Progress", "Wait", "Cell", "Vertical Text", "Alias", "Copy", "Move", "No Drop", "Not Allowed", "All Scroll", "Col Resize", "Row Resize", "N Resize", "E Resize", "S Resize", "W Resize", "NS Resize", "EW Resize", "NE Resize", "NW Resize", "SE Resize", "sW Resize", "NESW Resize", "NWSE Resize"]
+ });
+
+ sizingRow.element.appendChild(properties.boxSizing.element);
+ sizingRow.element.appendChild(properties.cursor.element);
+
+ var overflowRow = new WebInspector.DetailsSectionRow;
+
+ properties.opacity = new WebInspector.VisualStyleUnitSlider("opacity", WebInspector.UIString("Opacity"));
+ properties.overflow = new WebInspector.VisualStyleKeywordPicker(["overflow-x", "overflow-y"], WebInspector.UIString("Overflow"), {
+ basic: ["Initial", "Auto", "Hidden", "Scroll", "Visible"],
+ advanced: ["Marquee", "Overlay", " WebKit Paged X", " WebKit Paged Y"]
+ });
+
+ overflowRow.element.appendChild(properties.opacity.element);
+ overflowRow.element.appendChild(properties.overflow.element);
+
+ var displayGroup = new WebInspector.DetailsSectionGroup([displayRow, sizingRow, overflowRow]);
+ this._populateSection(group, [displayGroup]);
+ }
+
+ _generateMetricSectionRows(group, prefix, allowNegatives)
+ {
+ var properties = group.properties;
+
+ var hasPrefix = prefix && prefix.length;
+ var propertyNamePrefix = hasPrefix ? prefix + "-" : "";
+
+ var top = hasPrefix ? prefix + "Top" : "top";
+ var bottom = hasPrefix ? prefix + "Bottom" : "bottom";
+ var left = hasPrefix ? prefix + "Left" : "left";
+ var right = hasPrefix ? prefix + "Right" : "right";
+
+ var vertical = new WebInspector.DetailsSectionRow;
+
+ properties[top] = new WebInspector.VisualStyleNumberInputBox(propertyNamePrefix + "top", WebInspector.UIString("Top"), this._keywords.boxModel, this._units.defaults, allowNegatives);
+ properties[bottom] = new WebInspector.VisualStyleNumberInputBox(propertyNamePrefix + "bottom", WebInspector.UIString("Bottom"), this._keywords.boxModel, this._units.defaults, allowNegatives, true);
+ var verticalLink = new WebInspector.VisualStylePropertyEditorLink([properties[top], properties[bottom]], "link-vertical");
+
+ vertical.element.appendChild(properties[top].element);
+ vertical.element.appendChild(verticalLink.element);
+ vertical.element.appendChild(properties[bottom].element);
+
+ var horizontal = new WebInspector.DetailsSectionRow;
+
+ properties[left] = new WebInspector.VisualStyleNumberInputBox(propertyNamePrefix + "left", WebInspector.UIString("Left"), this._keywords.boxModel, this._units.defaults, allowNegatives);
+ properties[right] = new WebInspector.VisualStyleNumberInputBox(propertyNamePrefix + "right", WebInspector.UIString("Right"), this._keywords.boxModel, this._units.defaults, allowNegatives, true);
+ var horizontalLink = new WebInspector.VisualStylePropertyEditorLink([properties[left], properties[right]], "link-horizontal");
+
+ horizontal.element.appendChild(properties[left].element);
+ horizontal.element.appendChild(horizontalLink.element);
+ horizontal.element.appendChild(properties[right].element);
+
+ var allLinkRow = new WebInspector.DetailsSectionRow;
+ var allLink = new WebInspector.VisualStylePropertyEditorLink([properties[top], properties[bottom], properties[left], properties[right]], "link-all", [verticalLink, horizontalLink]);
+ allLinkRow.element.appendChild(allLink.element);
+
+ return [vertical, allLinkRow, horizontal];
+ }
+
+ _populatePositionSection()
+ {
+ var group = this._groups.position;
+ var rows = this._generateMetricSectionRows(group, null, true);
+ var properties = group.properties;
+
+ var positionType = new WebInspector.DetailsSectionRow;
+
+ properties.position = new WebInspector.VisualStyleKeywordPicker("position", WebInspector.UIString("Type"), {
+ basic: ["Static", "Relative", "Absolute", "Fixed"],
+ advanced: [" WebKit Sticky"]
+ });
+ properties.zIndex = new WebInspector.VisualStyleNumberInputBox("z-index", WebInspector.UIString("Z-Index"), this._keywords.boxModel, null, true);
+
+ positionType.element.appendChild(properties.position.element);
+ positionType.element.appendChild(properties.zIndex.element);
+ positionType.element.classList.add("visual-style-separated-row");
+
+ rows.unshift(positionType)
+
+ var positionGroup = new WebInspector.DetailsSectionGroup(rows);
+ this._populateSection(group, [positionGroup]);
+ }
+
+ _populateFloatSection()
+ {
+ var group = this._groups.float;
+ var properties = group.properties;
+
+ var floatRow = new WebInspector.DetailsSectionRow;
+
+ properties.float = new WebInspector.VisualStyleKeywordIconList("float", WebInspector.UIString("Float"), ["Left", "Right", "None"]);
+ floatRow.element.appendChild(properties.float.element);
+
+ var clearRow = new WebInspector.DetailsSectionRow;
+
+ properties.clear = new WebInspector.VisualStyleKeywordIconList("clear", WebInspector.UIString("Clear"), ["Left", "Right", "Both", "None"]);
+ clearRow.element.appendChild(properties.clear.element);
+
+ var floatGroup = new WebInspector.DetailsSectionGroup([floatRow, clearRow]);
+ this._populateSection(group, [floatGroup]);
+ }
+
+ _addMetricsMouseListeners(editor, mode)
+ {
+ function onEditorMouseover() {
+ if (!this._style)
+ return;
+
+ if (!this._style.ownerRule) {
+ WebInspector.domTreeManager.highlightDOMNode(this._style.node.id, mode);
+ return;
+ }
+
+ WebInspector.domTreeManager.highlightSelector(this._style.ownerRule.selectorText, this._style.node.ownerDocument.frameIdentifier, mode);
+ }
+
+ function onEditorMouseout() {
+ WebInspector.domTreeManager.hideDOMNodeHighlight();
+ }
+
+ editor.element.addEventListener("mouseover", onEditorMouseover.bind(editor));
+ editor.element.addEventListener("mouseout", onEditorMouseout.bind(editor));
+ }
+
+ _populateDimensionsSection()
+ {
+ var group = this._groups.dimensions;
+ var properties = group.properties;
+
+ var dimensionsWidth = new WebInspector.DetailsSectionRow;
+
+ properties.width = new WebInspector.VisualStyleRelativeNumberSlider("width", WebInspector.UIString("Width"), this._keywords.boxModel, this._units.defaults);
+
+ dimensionsWidth.element.appendChild(properties.width.element);
+
+ var dimensionsHeight = new WebInspector.DetailsSectionRow;
+
+ properties.height = new WebInspector.VisualStyleRelativeNumberSlider("height", WebInspector.UIString("Height"), this._keywords.boxModel, this._units.defaults, true);
+
+ dimensionsHeight.element.appendChild(properties.height.element);
+
+ var dimensionsProperties = [properties.width, properties.height];
+ var dimensionsRegularGroup = new WebInspector.DetailsSectionGroup([dimensionsWidth, dimensionsHeight]);
+
+ var dimensionsMinWidth = new WebInspector.DetailsSectionRow;
+
+ properties.minWidth = new WebInspector.VisualStyleRelativeNumberSlider("min-width", WebInspector.UIString("Width"), this._keywords.boxModel, this._units.defaults);
+
+ dimensionsMinWidth.element.appendChild(properties.minWidth.element);
+
+ var dimensionsMinHeight = new WebInspector.DetailsSectionRow;
+
+ properties.minHeight = new WebInspector.VisualStyleRelativeNumberSlider("min-height", WebInspector.UIString("Height"), this._keywords.boxModel, this._units.defaults);
+
+ dimensionsMinHeight.element.appendChild(properties.minHeight.element);
+
+ var dimensionsMinProperties = [properties.minWidth, properties.minHeight];
+ var dimensionsMinGroup = new WebInspector.DetailsSectionGroup([dimensionsMinWidth, dimensionsMinHeight]);
+
+ var dimensionsMaxKeywords = this._keywords.defaults.concat("None");
+ var dimensionsMaxWidth = new WebInspector.DetailsSectionRow;
+
+ properties.maxWidth = new WebInspector.VisualStyleRelativeNumberSlider("max-width", WebInspector.UIString("Width"), dimensionsMaxKeywords, this._units.defaults);
+
+ dimensionsMaxWidth.element.appendChild(properties.maxWidth.element);
+
+ var dimensionsMaxHeight = new WebInspector.DetailsSectionRow;
+
+ properties.maxHeight = new WebInspector.VisualStyleRelativeNumberSlider("max-height", WebInspector.UIString("Height"), dimensionsMaxKeywords, this._units.defaults);
+
+ dimensionsMaxHeight.element.appendChild(properties.maxHeight.element);
+
+ var dimensionsMaxProperties = [properties.maxWidth, properties.maxHeight];
+ var dimensionsMaxGroup = new WebInspector.DetailsSectionGroup([dimensionsMaxWidth, dimensionsMaxHeight]);
+
+ var dimensionsTabController = new WebInspector.VisualStyleTabbedPropertiesRow({
+ "default": {title: WebInspector.UIString("Default"), element: dimensionsRegularGroup.element, properties: dimensionsProperties},
+ "min": {title: WebInspector.UIString("Min"), element: dimensionsMinGroup.element, properties: dimensionsMinProperties},
+ "max": {title: WebInspector.UIString("Max"), element: dimensionsMaxGroup.element, properties: dimensionsMaxProperties}
+ });
+
+ var highlightMode = "content";
+ this._addMetricsMouseListeners(group.properties.width, highlightMode);
+ this._addMetricsMouseListeners(group.properties.height, highlightMode);
+ this._addMetricsMouseListeners(group.properties.minWidth, highlightMode);
+ this._addMetricsMouseListeners(group.properties.minHeight, highlightMode);
+ this._addMetricsMouseListeners(group.properties.maxWidth, highlightMode);
+ this._addMetricsMouseListeners(group.properties.maxHeight, highlightMode);
+
+ var dimensionsGroup = new WebInspector.DetailsSectionGroup([dimensionsTabController, dimensionsRegularGroup, dimensionsMinGroup, dimensionsMaxGroup]);
+ this._populateSection(group, [dimensionsGroup]);
+ }
+
+ _populateMarginSection()
+ {
+ var group = this._groups.margin;
+ var rows = this._generateMetricSectionRows(group, "margin", true);
+
+ var highlightMode = "margin";
+ this._addMetricsMouseListeners(group.properties.marginTop, highlightMode);
+ this._addMetricsMouseListeners(group.properties.marginBottom, highlightMode);
+ this._addMetricsMouseListeners(group.properties.marginLeft, highlightMode);
+ this._addMetricsMouseListeners(group.properties.marginRight, highlightMode);
+
+ var marginGroup = new WebInspector.DetailsSectionGroup(rows);
+ this._populateSection(group, [marginGroup]);
+ }
+
+ _populatePaddingSection()
+ {
+ var group = this._groups.padding;
+ var rows = this._generateMetricSectionRows(group, "padding");
+
+ var highlightMode = "padding";
+ this._addMetricsMouseListeners(group.properties.paddingTop, highlightMode);
+ this._addMetricsMouseListeners(group.properties.paddingBottom, highlightMode);
+ this._addMetricsMouseListeners(group.properties.paddingLeft, highlightMode);
+ this._addMetricsMouseListeners(group.properties.paddingRight, highlightMode);
+
+ var paddingGroup = new WebInspector.DetailsSectionGroup(rows);
+ this._populateSection(group, [paddingGroup]);
+ }
+
+ _populateFlexboxSection()
+ {
+ var group = this._groups.flexbox;
+ var properties = group.properties;
+
+ var flexOrderRow = new WebInspector.DetailsSectionRow;
+
+ properties.order = new WebInspector.VisualStyleNumberInputBox("order", WebInspector.UIString("Order"), this._keywords.defaults);
+ properties.flexBasis = new WebInspector.VisualStyleNumberInputBox("flex-basis", WebInspector.UIString("Basis"), this._keywords.boxModel, this._units.defaults, true);
+
+ flexOrderRow.element.appendChild(properties.order.element);
+ flexOrderRow.element.appendChild(properties.flexBasis.element);
+
+ var flexSizeRow = new WebInspector.DetailsSectionRow;
+
+ properties.flexGrow = new WebInspector.VisualStyleNumberInputBox("flex-grow", WebInspector.UIString("Grow"), this._keywords.defaults, null);
+ properties.flexShrink = new WebInspector.VisualStyleNumberInputBox("flex-shrink", WebInspector.UIString("Shrink"), this._keywords.defaults, null);
+
+ flexSizeRow.element.appendChild(properties.flexGrow.element);
+ flexSizeRow.element.appendChild(properties.flexShrink.element);
+
+ var flexFlowRow = new WebInspector.DetailsSectionRow;
+
+ properties.flexDirection = new WebInspector.VisualStyleKeywordPicker("flex-direction", WebInspector.UIString("Direction"), this._keywords.defaults.concat(["Row", "Row Reverse", "Column", "Column Reverse"]));
+ properties.flexWrap = new WebInspector.VisualStyleKeywordPicker("flex-wrap", WebInspector.UIString("Wrap"), this._keywords.defaults.concat(["Wrap", "Wrap Reverse", "Nowrap"]));
+
+ flexFlowRow.element.appendChild(properties.flexDirection.element);
+ flexFlowRow.element.appendChild(properties.flexWrap.element);
+
+ var flexboxGroup = new WebInspector.DetailsSectionGroup([flexOrderRow, flexSizeRow, flexFlowRow]);
+ this._populateSection(group, [flexboxGroup]);
+ }
+
+ _populateTextStyleSection()
+ {
+ var group = this._groups.textStyle;
+ var properties = group.properties;
+
+ var textAppearanceRow = new WebInspector.DetailsSectionRow;
+
+ properties.color = new WebInspector.VisualStyleColorPicker("color", WebInspector.UIString("Color"));
+ properties.textDirection = new WebInspector.VisualStyleKeywordPicker("direction", WebInspector.UIString("Direction"), this._keywords.defaults.concat(["LTR", "RTL"]));
+
+ textAppearanceRow.element.appendChild(properties.color.element);
+ textAppearanceRow.element.appendChild(properties.textDirection.element);
+
+ var textAlignRow = new WebInspector.DetailsSectionRow;
+
+ properties.textAlign = new WebInspector.VisualStyleKeywordIconList("text-align", WebInspector.UIString("Align"), ["Left", "Center", "Right", "Justify"]);
+
+ textAlignRow.element.appendChild(properties.textAlign.element);
+
+ var textTransformRow = new WebInspector.DetailsSectionRow;
+
+ properties.textTransform = new WebInspector.VisualStyleKeywordIconList("text-transform", WebInspector.UIString("Transform"), ["Capitalize", "Uppercase", "Lowercase", "None"]);
+
+ textTransformRow.element.appendChild(properties.textTransform.element);
+
+ var textDecorationRow = new WebInspector.DetailsSectionRow;
+
+ properties.textDecoration = new WebInspector.VisualStyleKeywordIconList("text-decoration", WebInspector.UIString("Decoration"), ["Underline", "Line Through", "Overline", "None"]);
+
+ textDecorationRow.element.appendChild(properties.textDecoration.element);
+
+ group.autocompleteCompatibleProperties = [properties.color];
+
+ var textStyleGroup = new WebInspector.DetailsSectionGroup([textAppearanceRow, textAlignRow, textTransformRow, textDecorationRow]);
+ this._populateSection(group, [textStyleGroup]);
+ }
+
+ _populateFontSection()
+ {
+ var group = this._groups.font;
+ var properties = group.properties;
+
+ var fontFamilyRow = new WebInspector.DetailsSectionRow;
+
+ properties.fontFamily = new WebInspector.VisualStyleFontFamilyListEditor("font-family", WebInspector.UIString("Family"));
+
+ fontFamilyRow.element.appendChild(properties.fontFamily.element);
+
+ var fontSizeRow = new WebInspector.DetailsSectionRow;
+
+ properties.fontSize = new WebInspector.VisualStyleNumberInputBox("font-size", WebInspector.UIString("Size"), this._keywords.defaults.concat(["Larger", "XX Large", "X Large", "Large", "Medium", "Small", "X Small", "XX Small", "Smaller"]), this._units.defaults);
+
+ properties.fontWeight = new WebInspector.VisualStyleKeywordPicker("font-weight", WebInspector.UIString("Weight"), {
+ basic: this._keywords.defaults.concat(["Bolder", "Bold", "Normal", "Lighter"]),
+ advanced: ["100", "200", "300", "400", "500", "600", "700", "800", "900"]
+ });
+
+ fontSizeRow.element.appendChild(properties.fontSize.element);
+ fontSizeRow.element.appendChild(properties.fontWeight.element);
+
+ var fontStyleRow = new WebInspector.DetailsSectionRow;
+
+ properties.fontStyle = new WebInspector.VisualStyleKeywordIconList("font-style", WebInspector.UIString("Style"), ["Italic", "Normal"]);
+ properties.fontVariant = new WebInspector.VisualStyleKeywordCheckbox("font-variant", WebInspector.UIString("Variant"), "Small Caps")
+
+ fontStyleRow.element.appendChild(properties.fontStyle.element);
+ fontStyleRow.element.appendChild(properties.fontVariant.element);
+
+ group.autocompleteCompatibleProperties = [properties.fontFamily];
+
+ var fontGroup = new WebInspector.DetailsSectionGroup([fontFamilyRow, fontSizeRow, fontStyleRow]);
+ this._populateSection(group, [fontGroup]);
+ }
+
+ _populateTextSpacingSection()
+ {
+ var group = this._groups.textSpacing;
+ var properties = group.properties;
+
+ var defaultTextKeywords = this._keywords.defaults.concat(["Normal"]);
+
+ var textLayoutRow = new WebInspector.DetailsSectionRow;
+
+ properties.lineHeight = new WebInspector.VisualStyleNumberInputBox("line-height", WebInspector.UIString("Height"), defaultTextKeywords, this._units.defaults);
+ properties.verticalAlign = new WebInspector.VisualStyleNumberInputBox("vertical-align", WebInspector.UIString("Align"), ["Baseline", "Bottom"].concat(this._keywords.defaults, ["Middle", "Sub", "Super", "Text Bottom", "Text Top", "Top"]), this._units.defaults);
+
+ textLayoutRow.element.appendChild(properties.lineHeight.element);
+ textLayoutRow.element.appendChild(properties.verticalAlign.element);
+
+ var textSpacingRow = new WebInspector.DetailsSectionRow;
+
+ properties.letterSpacing = new WebInspector.VisualStyleNumberInputBox("letter-spacing", WebInspector.UIString("Letter"), defaultTextKeywords, this._units.defaults);
+ properties.wordSpacing = new WebInspector.VisualStyleNumberInputBox("word-spacing", WebInspector.UIString("Word"), defaultTextKeywords, this._units.defaults);
+
+ textSpacingRow.element.appendChild(properties.letterSpacing.element);
+ textSpacingRow.element.appendChild(properties.wordSpacing.element);
+
+ var textWhitespaceRow = new WebInspector.DetailsSectionRow;
+
+ properties.textIndent = new WebInspector.VisualStyleNumberInputBox("text-indent", WebInspector.UIString("Indent"), this._keywords.defaults, this._units.defaults);
+ properties.whiteSpace = new WebInspector.VisualStyleKeywordPicker("white-space", WebInspector.UIString("Whitespace"), this._keywords.defaults.concat(["Normal", "Nowrap", "Pre", "Pre Line", "Pre Wrap"]));
+
+ textWhitespaceRow.element.appendChild(properties.textIndent.element);
+ textWhitespaceRow.element.appendChild(properties.whiteSpace.element);
+
+ var textSpacingGroup = new WebInspector.DetailsSectionGroup([textLayoutRow, textSpacingRow, textWhitespaceRow]);
+ this._populateSection(group, [textSpacingGroup]);
+ }
+
+ _populateTextShadowSection()
+ {
+ var group = this._groups.textShadow;
+ var properties = group.properties;
+
+ var textShadowSizing = new WebInspector.DetailsSectionRow;
+
+ var textShadowH = new WebInspector.VisualStyleNumberInputBox("text-shadow", WebInspector.UIString("Horizontal"), null, this._units.defaultsSansPercent);
+ var textShadowV = new WebInspector.VisualStyleNumberInputBox("text-shadow", WebInspector.UIString("Vertical"), null, this._units.defaultsSansPercent);
+
+ textShadowSizing.element.appendChild(textShadowH.element);
+ textShadowSizing.element.appendChild(textShadowV.element);
+
+ var textShadowStyle = new WebInspector.DetailsSectionRow;
+
+ var textShadowColor = new WebInspector.VisualStyleColorPicker("text-shadow", WebInspector.UIString("Color"));
+ textShadowColor.colorProperty = true;
+ var textShadowBlur = new WebInspector.VisualStyleNumberInputBox("text-shadow", WebInspector.UIString("Blur"), null, this._units.defaultsSansPercent);
+ textShadowBlur.optionalProperty = true;
+
+ textShadowStyle.element.appendChild(textShadowColor.element);
+ textShadowStyle.element.appendChild(textShadowBlur.element);
+
+ properties.textShadow = new WebInspector.VisualStylePropertyCombiner("text-shadow", [textShadowH, textShadowV, textShadowBlur, textShadowColor]);
+
+ group.autocompleteCompatibleProperties = [textShadowColor];
+
+ var textShadowGroup = new WebInspector.DetailsSectionGroup([textShadowSizing, textShadowStyle]);
+ this._populateSection(group, [textShadowGroup]);
+ }
+
+ _populateBackgroundStyleSection()
+ {
+ var group = this._groups.backgroundStyle;
+ var properties = group.properties;
+
+ var backgroundStyleRow = new WebInspector.DetailsSectionRow;
+
+ properties.backgroundColor = new WebInspector.VisualStyleColorPicker("background-color", WebInspector.UIString("Color"));
+ properties.backgroundImage = new WebInspector.VisualStyleURLInput("background-image", WebInspector.UIString("Image"));
+
+ backgroundStyleRow.element.appendChild(properties.backgroundColor.element);
+ backgroundStyleRow.element.appendChild(properties.backgroundImage.element);
+
+ var backgroundSizeRow = new WebInspector.DetailsSectionRow;
+
+ var backgroundSizeKeywords = this._keywords.boxModel.concat(["Contain", "Cover"]);
+ var backgroundSizeX = new WebInspector.VisualStyleNumberInputBox("background-size", WebInspector.UIString("Width"), backgroundSizeKeywords, this._units.defaults);
+ backgroundSizeX.masterProperty = true;
+ var backgroundSizeY = new WebInspector.VisualStyleNumberInputBox("background-size", WebInspector.UIString("Height"), backgroundSizeKeywords, this._units.defaults);
+ backgroundSizeY.masterProperty = true;
+
+ properties.backgroundSize = new WebInspector.VisualStylePropertyCombiner("background-size", [backgroundSizeX, backgroundSizeY]);
+
+ backgroundSizeRow.element.appendChild(backgroundSizeX.element);
+ backgroundSizeRow.element.appendChild(backgroundSizeY.element);
+
+ var backgroundRepeatRow = new WebInspector.DetailsSectionRow;
+
+ properties.backgroundRepeat = new WebInspector.VisualStyleKeywordPicker("background-repeat", WebInspector.UIString("Repeat"), this._keywords.defaults.concat(["No Repeat", "Repeat", "Repeat X", "Repeat Y"]));
+ properties.backgroundAttachment = new WebInspector.VisualStyleKeywordPicker("background-attachment", WebInspector.UIString("Attach"), this._keywords.defaults.concat(["Fixed", "Local", "Scroll"]));
+
+ backgroundRepeatRow.element.appendChild(properties.backgroundRepeat.element);
+ backgroundRepeatRow.element.appendChild(properties.backgroundAttachment.element);
+
+ var backgroundPositionRow = new WebInspector.DetailsSectionRow;
+
+ var backgroundPositionX = new WebInspector.VisualStyleNumberInputBox("background-position", WebInspector.UIString("Position X"), ["Center", "Left", "Right"], this._units.defaults);
+ var backgroundPositionY = new WebInspector.VisualStyleNumberInputBox("background-position", WebInspector.UIString("Position Y"), ["Bottom", "Center", "Top"], this._units.defaults);
+
+ properties.backgroundPosition = new WebInspector.VisualStylePropertyCombiner("background-position", [backgroundPositionX, backgroundPositionY]);
+
+ backgroundPositionRow.element.appendChild(backgroundPositionX.element);
+ backgroundPositionRow.element.appendChild(backgroundPositionY.element);
+
+ group.autocompleteCompatibleProperties = [properties.backgroundColor];
+
+ var backgroundStyleGroup = new WebInspector.DetailsSectionGroup([backgroundStyleRow, backgroundSizeRow, backgroundRepeatRow, backgroundPositionRow]);
+ this._populateSection(group, [backgroundStyleGroup]);
+ }
+
+ _populateBorderSection()
+ {
+ var group = this._groups.border;
+ var properties = group.properties;
+
+ var borderAllSize = new WebInspector.DetailsSectionRow;
+
+ properties.borderStyle = new WebInspector.VisualStyleKeywordPicker(["border-top-style", "border-right-style", "border-bottom-style", "border-left-style"] , WebInspector.UIString("Style"), this._keywords.borderStyle);
+ properties.borderStyle.propertyReferenceName = "border-style";
+ properties.borderWidth = new WebInspector.VisualStyleNumberInputBox(["border-top-width", "border-right-width", "border-bottom-width", "border-left-width"], WebInspector.UIString("Width"), this._keywords.borderWidth, this._units.defaults);
+ properties.borderWidth.propertyReferenceName = "border-width";
+
+ borderAllSize.element.appendChild(properties.borderStyle.element);
+ borderAllSize.element.appendChild(properties.borderWidth.element);
+
+ var borderAllStyle = new WebInspector.DetailsSectionRow;
+
+ properties.borderColor = new WebInspector.VisualStyleColorPicker(["border-top-color", "border-right-color", "border-bottom-color", "border-left-color"], WebInspector.UIString("Color"));
+ properties.borderColor.propertyReferenceName = "border-color";
+ properties.borderRadius = new WebInspector.VisualStyleNumberInputBox(["border-top-left-radius", "border-top-right-radius", "border-bottom-left-radius", "border-bottom-right-radius"], WebInspector.UIString("Radius"), this._keywords.defaults, this._units.defaults);
+ properties.borderRadius.propertyReferenceName = "border-radius";
+
+ borderAllStyle.element.appendChild(properties.borderColor.element);
+ borderAllStyle.element.appendChild(properties.borderRadius.element);
+
+ var borderAllProperties = [properties.borderStyle, properties.borderWidth, properties.borderColor, properties.borderRadius];
+ var borderAllGroup = new WebInspector.DetailsSectionGroup([borderAllSize, borderAllStyle]);
+
+ var borderTopSize = new WebInspector.DetailsSectionRow;
+
+ properties.borderTopStyle = new WebInspector.VisualStyleKeywordPicker("border-top-style", WebInspector.UIString("Style"), this._keywords.borderStyle);
+ properties.borderTopWidth = new WebInspector.VisualStyleNumberInputBox("border-top-width", WebInspector.UIString("Width"), this._keywords.borderWidth, this._units.defaults);
+
+ borderTopSize.element.appendChild(properties.borderTopStyle.element);
+ borderTopSize.element.appendChild(properties.borderTopWidth.element);
+
+ var borderTopStyle = new WebInspector.DetailsSectionRow;
+
+ properties.borderTopColor = new WebInspector.VisualStyleColorPicker("border-top-color", WebInspector.UIString("Color"));
+ properties.borderTopRadius = new WebInspector.VisualStyleNumberInputBox(["border-top-left-radius", "border-top-right-radius"], WebInspector.UIString("Radius"), this._keywords.defaults, this._units.defaults);
+
+ borderTopStyle.element.appendChild(properties.borderTopColor.element);
+ borderTopStyle.element.appendChild(properties.borderTopRadius.element);
+
+ var borderTopProperties = [properties.borderTopStyle, properties.borderTopWidth, properties.borderTopColor, properties.borderTopRadius];
+ var borderTopGroup = new WebInspector.DetailsSectionGroup([borderTopSize, borderTopStyle]);
+
+ var borderRightSize = new WebInspector.DetailsSectionRow;
+
+ properties.borderRightStyle = new WebInspector.VisualStyleKeywordPicker("border-right-style", WebInspector.UIString("Style"), this._keywords.borderStyle);
+ properties.borderRightWidth = new WebInspector.VisualStyleNumberInputBox("border-right-width", WebInspector.UIString("Width"), this._keywords.borderWidth, this._units.defaults);
+
+ borderRightSize.element.appendChild(properties.borderRightStyle.element);
+ borderRightSize.element.appendChild(properties.borderRightWidth.element);
+
+ var borderRightStyle = new WebInspector.DetailsSectionRow;
+
+ properties.borderRightColor = new WebInspector.VisualStyleColorPicker("border-right-color", WebInspector.UIString("Color"));
+ properties.borderRightRadius = new WebInspector.VisualStyleNumberInputBox(["border-top-right-radius", "border-bottom-right-radius"], WebInspector.UIString("Radius"), this._keywords.defaults, this._units.defaults);
+
+ borderRightStyle.element.appendChild(properties.borderRightColor.element);
+ borderRightStyle.element.appendChild(properties.borderRightRadius.element);
+
+ var borderRightProperties = [properties.borderRightStyle, properties.borderRightWidth, properties.borderRightColor, properties.borderRightRadius];
+ var borderRightGroup = new WebInspector.DetailsSectionGroup([borderRightSize, borderRightStyle]);
+
+ var borderBottomSize = new WebInspector.DetailsSectionRow;
+
+ properties.borderBottomStyle = new WebInspector.VisualStyleKeywordPicker("border-bottom-style", WebInspector.UIString("Style"), this._keywords.borderStyle);
+ properties.borderBottomWidth = new WebInspector.VisualStyleNumberInputBox("border-bottom-width", WebInspector.UIString("Width"), this._keywords.borderWidth, this._units.defaults);
+
+ borderBottomSize.element.appendChild(properties.borderBottomStyle.element);
+ borderBottomSize.element.appendChild(properties.borderBottomWidth.element);
+
+ var borderBottomStyle = new WebInspector.DetailsSectionRow;
+
+ properties.borderBottomColor = new WebInspector.VisualStyleColorPicker("border-bottom-color", WebInspector.UIString("Color"));
+ properties.borderBottomRadius = new WebInspector.VisualStyleNumberInputBox(["border-bottom-left-radius", "border-bottom-right-radius"], WebInspector.UIString("Radius"), this._keywords.defaults, this._units.defaults);
+
+ borderBottomStyle.element.appendChild(properties.borderBottomColor.element);
+ borderBottomStyle.element.appendChild(properties.borderBottomRadius.element);
+
+ var borderBottomProperties = [properties.borderBottomStyle, properties.borderBottomWidth, properties.borderBottomColor, properties.borderBottomRadius];
+ var borderBottomGroup = new WebInspector.DetailsSectionGroup([borderBottomSize, borderBottomStyle]);
+
+ var borderLeftSize = new WebInspector.DetailsSectionRow;
+
+ properties.borderLeftStyle = new WebInspector.VisualStyleKeywordPicker("border-left-style", WebInspector.UIString("Style"), this._keywords.borderStyle);
+ properties.borderLeftWidth = new WebInspector.VisualStyleNumberInputBox("border-left-width", WebInspector.UIString("Width"), this._keywords.borderWidth, this._units.defaults);
+
+ borderLeftSize.element.appendChild(properties.borderLeftStyle.element);
+ borderLeftSize.element.appendChild(properties.borderLeftWidth.element);
+
+ var borderLeftStyle = new WebInspector.DetailsSectionRow;
+
+ properties.borderLeftColor = new WebInspector.VisualStyleColorPicker("border-left-color", WebInspector.UIString("Color"));
+ properties.borderLeftRadius = new WebInspector.VisualStyleNumberInputBox(["border-top-left-radius", "border-bottom-left-radius"], WebInspector.UIString("Radius"), this._keywords.defaults, this._units.defaults);
+
+ borderLeftStyle.element.appendChild(properties.borderLeftColor.element);
+ borderLeftStyle.element.appendChild(properties.borderLeftRadius.element);
+
+ var borderLeftProperties = [properties.borderLeftStyle, properties.borderLeftWidth, properties.borderLeftColor, properties.borderLeftRadius];
+ var borderLeftGroup = new WebInspector.DetailsSectionGroup([borderLeftSize, borderLeftStyle]);
+
+ var borderTabController = new WebInspector.VisualStyleTabbedPropertiesRow({
+ "all": {title: WebInspector.UIString("All"), element: borderAllGroup.element, properties: borderAllProperties},
+ "top": {title: WebInspector.UIString("Top"), element: borderTopGroup.element, properties: borderTopProperties},
+ "right": {title: WebInspector.UIString("Right"), element: borderRightGroup.element, properties: borderRightProperties},
+ "bottom": {title: WebInspector.UIString("Bottom"), element: borderBottomGroup.element, properties: borderBottomProperties},
+ "left": {title: WebInspector.UIString("Left"), element: borderLeftGroup.element, properties: borderLeftProperties}
+ });
+
+ var highlightMode = "border";
+ this._addMetricsMouseListeners(group.properties.borderWidth, highlightMode);
+ this._addMetricsMouseListeners(group.properties.borderTopWidth, highlightMode);
+ this._addMetricsMouseListeners(group.properties.borderBottomWidth, highlightMode);
+ this._addMetricsMouseListeners(group.properties.borderLeftWidth, highlightMode);
+ this._addMetricsMouseListeners(group.properties.borderRightWidth, highlightMode);
+
+ group.autocompleteCompatibleProperties = [properties.borderColor, properties.borderTopColor, properties.borderBottomColor, properties.borderLeftColor, properties.borderRightColor];
+
+ var borderGroup = new WebInspector.DetailsSectionGroup([borderTabController, borderAllGroup, borderTopGroup, borderRightGroup, borderBottomGroup, borderLeftGroup]);
+ this._populateSection(group, [borderGroup]);
+ }
+
+ _populateOutlineSection()
+ {
+ var group = this._groups.outline;
+ var properties = group.properties;
+
+ var outlineSizeRow = new WebInspector.DetailsSectionRow;
+
+ properties.outlineWidth = new WebInspector.VisualStyleNumberInputBox("outline-width", WebInspector.UIString("Width"), this._keywords.borderWidth, this._units.defaults);
+ properties.outlineOffset = new WebInspector.VisualStyleNumberInputBox("outline-offset", WebInspector.UIString("Offset"), this._keywords.defaults, this._units.defaults, true);
+
+ outlineSizeRow.element.appendChild(properties.outlineWidth.element);
+ outlineSizeRow.element.appendChild(properties.outlineOffset.element);
+
+ var outlineStyleRow = new WebInspector.DetailsSectionRow;
+
+ properties.outlineStyle = new WebInspector.VisualStyleKeywordPicker("outline-style" , WebInspector.UIString("Style"), this._keywords.borderStyle);
+ properties.outlineColor = new WebInspector.VisualStyleColorPicker("outline-color", WebInspector.UIString("Color"));
+
+ outlineStyleRow.element.appendChild(properties.outlineStyle.element);
+ outlineStyleRow.element.appendChild(properties.outlineColor.element);
+
+ group.autocompleteCompatibleProperties = [properties.outlineColor];
+
+ var outlineGroup = new WebInspector.DetailsSectionGroup([outlineSizeRow, outlineStyleRow]);
+ this._populateSection(group, [outlineGroup]);
+ }
+
+ _populateBoxShadowSection()
+ {
+ var group = this._groups.boxShadow;
+ var properties = group.properties;
+
+ var boxShadowRow = new WebInspector.DetailsSectionRow;
+
+ properties.boxShadow = new WebInspector.VisualStyleCommaSeparatedKeywordEditor("box-shadow");
+ properties.boxShadow.element.style.marginLeft = "11px";
+
+ boxShadowRow.element.appendChild(properties.boxShadow.element);
+
+ var boxShadowHRow = new WebInspector.DetailsSectionRow;
+
+ var boxShadowH = new WebInspector.VisualStyleRelativeNumberSlider("box-shadow", WebInspector.UIString("Left"), null, this._units.defaultsSansPercent, true);
+
+ boxShadowHRow.element.appendChild(boxShadowH.element);
+
+ var boxShadowVRow = new WebInspector.DetailsSectionRow;
+
+ var boxShadowV = new WebInspector.VisualStyleRelativeNumberSlider("box-shadow", WebInspector.UIString("Top"), null, this._units.defaultsSansPercent, true);
+
+ boxShadowVRow.element.appendChild(boxShadowV.element);
+
+ var boxShadowBlurRow = new WebInspector.DetailsSectionRow;
+
+ var boxShadowBlur = new WebInspector.VisualStyleNumberInputBox("box-shadow", WebInspector.UIString("Blur"), null, this._units.defaultsSansPercent);
+ boxShadowBlur.optionalProperty = true;
+ var boxShadowSpread = new WebInspector.VisualStyleNumberInputBox("box-shadow", WebInspector.UIString("Spread"), null, this._units.defaultsSansPercent, true);
+ boxShadowSpread.optionalProperty = true;
+
+ boxShadowBlurRow.element.appendChild(boxShadowBlur.element);
+ boxShadowBlurRow.element.appendChild(boxShadowSpread.element);
+
+ var boxShadowColorRow = new WebInspector.DetailsSectionRow;
+
+ var boxShadowColor = new WebInspector.VisualStyleColorPicker("box-shadow", WebInspector.UIString("Color"));
+ boxShadowColor.colorProperty = true;
+ var boxShadowInset = new WebInspector.VisualStyleKeywordCheckbox("box-shadow", WebInspector.UIString("Inset"), "Inset");
+ boxShadowInset.optionalProperty = true;
+
+ boxShadowColorRow.element.appendChild(boxShadowColor.element);
+ boxShadowColorRow.element.appendChild(boxShadowInset.element);
+
+ var boxShadowPropertyCombiner = new WebInspector.VisualStylePropertyCombiner("box-shadow", [boxShadowH, boxShadowV, boxShadowBlur, boxShadowSpread, boxShadowColor, boxShadowInset]);
+
+ function noRemainingTreeItems() {
+ boxShadowPropertyCombiner.updateValuesFromText("");
+ boxShadowH.disabled = true;
+ boxShadowV.disabled = true;
+ boxShadowBlur.disabled = true;
+ boxShadowSpread.disabled = true;
+ boxShadowColor.disabled = true;
+ boxShadowInset.disabled = true;
+ }
+ properties.boxShadow.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.NoRemainingTreeItems, noRemainingTreeItems, this);
+
+ function selectedBoxShadowItemValueChanged() {
+ properties.boxShadow.selectedTreeElementValue = boxShadowPropertyCombiner.synthesizedValue;
+ }
+ boxShadowPropertyCombiner.addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, selectedBoxShadowItemValueChanged, this);
+
+ function boxShadowItemSelected(event) {
+ boxShadowPropertyCombiner.updateValuesFromText(event.data.text || "");
+ }
+ properties.boxShadow.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, boxShadowItemSelected, this);
+
+ group.autocompleteCompatibleProperties = [boxShadowColor];
+
+ var boxShadow = new WebInspector.DetailsSectionGroup([boxShadowRow, boxShadowHRow, boxShadowVRow, boxShadowBlurRow, boxShadowColorRow]);
+ this._populateSection(group, [boxShadow]);
+ }
+
+ _populateTransitionSection()
+ {
+ var group = this._groups.transition;
+ var properties = group.properties;
+
+ var transitionRow = new WebInspector.DetailsSectionRow;
+
+ properties.transition = new WebInspector.VisualStyleCommaSeparatedKeywordEditor("transition");
+ properties.transition.element.style.marginLeft = "11px";
+
+ transitionRow.element.appendChild(properties.transition.element);
+
+ var transitionPropertyRow = new WebInspector.DetailsSectionRow;
+
+ var transitionProperty = new WebInspector.VisualStylePropertyNameInput("transition-property", WebInspector.UIString("Property"));
+ var transitionTiming = new WebInspector.VisualStyleTimingEditor("transition-timing-function", WebInspector.UIString("Timing"), ["Linear", "Ease", "Ease In", "Ease Out", "Ease In Out"]);
+
+ transitionPropertyRow.element.appendChild(transitionProperty.element);
+ transitionPropertyRow.element.appendChild(transitionTiming.element);
+
+ var transitionDurationRow = new WebInspector.DetailsSectionRow;
+
+ var transitionTimeKeywords = ["s", "ms"];
+ var transitionDuration = new WebInspector.VisualStyleNumberInputBox("transition-duration", WebInspector.UIString("Duration"), null, transitionTimeKeywords);
+ var transitionDelay = new WebInspector.VisualStyleNumberInputBox("transition-delay", WebInspector.UIString("Delay"), null, transitionTimeKeywords);
+ transitionDelay.optionalProperty = true;
+
+ transitionDurationRow.element.appendChild(transitionDuration.element);
+ transitionDurationRow.element.appendChild(transitionDelay.element);
+
+ var transitionPropertyCombiner = new WebInspector.VisualStylePropertyCombiner("transition", [transitionProperty, transitionTiming, transitionDuration, transitionDelay]);
+
+ function noRemainingTreeItems() {
+ transitionPropertyCombiner.updateValuesFromText("");
+ transitionProperty.disabled = true;
+ transitionTiming.disabled = true;
+ transitionDuration.disabled = true;
+ transitionDelay.disabled = true;
+ }
+ properties.transition.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.NoRemainingTreeItems, noRemainingTreeItems, this);
+
+ function selectedtransitionItemValueChanged() {
+ properties.transition.selectedTreeElementValue = transitionPropertyCombiner.synthesizedValue;
+ }
+ transitionPropertyCombiner.addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, selectedtransitionItemValueChanged, this);
+
+ function transitionItemSelected(event) {
+ transitionPropertyCombiner.updateValuesFromText(event.data.text || "");
+ }
+ properties.transition.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, transitionItemSelected, this);
+
+ group.autocompleteCompatibleProperties = [transitionProperty];
+
+ var transitionGroup = new WebInspector.DetailsSectionGroup([transitionRow, transitionPropertyRow, transitionDurationRow]);
+ this._populateSection(group, [transitionGroup]);
+ }
+};
+
+WebInspector.VisualStyleDetailsPanel.StyleDisabledSymbol = Symbol("visual-style-style-disabled");
+WebInspector.VisualStyleDetailsPanel.InitialPropertySectionTextListSymbol = Symbol("visual-style-initial-property-section-text");
+
+// FIXME: Add information about each property as a form of documentation. This is currently empty as
+// we do not have permission to use the info on sites like MDN and have not written anything ourselves.
+WebInspector.VisualStyleDetailsPanel.propertyReferenceInfo = {};
</ins></span></pre>
</div>
</div>
</body>
</html>