<!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>[194504] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/194504">194504</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-01-02 14:32:57 -0800 (Sat, 02 Jan 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Add list-style properties to Visual Sidebar
https://bugs.webkit.org/show_bug.cgi?id=152631
Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2016-01-02
Reviewed by Timothy Hatcher.
Seeing as lists are very common in web pages across the internet, adding
a section to let users edit the properties unique to lists seems prudent.
* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Images/ListStylePositionInside.svg: Added.
* UserInterface/Images/ListStylePositionOutside.svg: Added.
* UserInterface/Main.html:
Re-added UserInterface/Views/VisualStyleURLInput.js
* UserInterface/Views/VisualStyleDetailsPanel.js:
(WebInspector.VisualStyleDetailsPanel):
(WebInspector.VisualStyleDetailsPanel.prototype._populateListStyleSection):
* UserInterface/Views/VisualStyleKeywordIconList.css:
(.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon):
Added specified color property to ensure that :active doesn't break the color of the svg.
(.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:matches(.computed, .selected)):
(.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon.selected):
Changed the background-color and border-color values to match the rest of Web Inspector.
* UserInterface/Views/VisualStyleKeywordIconList.js:
(WebInspector.VisualStyleKeywordIconList):
(WebInspector.VisualStyleKeywordIconList.dashToCapital): Deleted.
(WebInspector.VisualStyleKeywordIconList.createListItem):
The "initial" keyword will also use UserInterface/Images/VisualStyleNone.svg
* UserInterface/Views/VisualStyleURLInput.js: Added.
Previously removed in <a href="http://trac.webkit.org/projects/webkit/changeset/192705">r192705</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleKeywordIconListcss">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleKeywordIconListjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesListStylePositionInsidesvg">trunk/Source/WebInspectorUI/UserInterface/Images/ListStylePositionInside.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesListStylePositionOutsidesvg">trunk/Source/WebInspectorUI/UserInterface/Images/ListStylePositionOutside.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleURLInputjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleURLInput.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (194503 => 194504)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-01-02 22:22:10 UTC (rev 194503)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-01-02 22:32:57 UTC (rev 194504)
</span><span class="lines">@@ -1,3 +1,40 @@
</span><ins>+2016-01-02 Devin Rousso <dcrousso+webkit@gmail.com>
+
+ Web Inspector: Add list-style properties to Visual Sidebar
+ https://bugs.webkit.org/show_bug.cgi?id=152631
+
+ Reviewed by Timothy Hatcher.
+
+ Seeing as lists are very common in web pages across the internet, adding
+ a section to let users edit the properties unique to lists seems prudent.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Images/ListStylePositionInside.svg: Added.
+ * UserInterface/Images/ListStylePositionOutside.svg: Added.
+ * UserInterface/Main.html:
+ Re-added UserInterface/Views/VisualStyleURLInput.js
+
+ * UserInterface/Views/VisualStyleDetailsPanel.js:
+ (WebInspector.VisualStyleDetailsPanel):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateListStyleSection):
+
+ * UserInterface/Views/VisualStyleKeywordIconList.css:
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon):
+ Added specified color property to ensure that :active doesn't break the color of the svg.
+
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:matches(.computed, .selected)):
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon.selected):
+ Changed the background-color and border-color values to match the rest of Web Inspector.
+
+ * UserInterface/Views/VisualStyleKeywordIconList.js:
+ (WebInspector.VisualStyleKeywordIconList):
+ (WebInspector.VisualStyleKeywordIconList.dashToCapital): Deleted.
+ (WebInspector.VisualStyleKeywordIconList.createListItem):
+ The "initial" keyword will also use UserInterface/Images/VisualStyleNone.svg
+
+ * UserInterface/Views/VisualStyleURLInput.js: Added.
+ Previously removed in r192705.
+
</ins><span class="cx"> 2016-01-02 Alberto Garcia <berto@igalia.com>
</span><span class="cx">
</span><span class="cx"> [GTK] webkit 2.3.5 build failure with python 3.3.4
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (194503 => 194504)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-01-02 22:22:10 UTC (rev 194503)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-01-02 22:32:57 UTC (rev 194504)
</span><span class="lines">@@ -370,6 +370,7 @@
</span><span class="cx"> localizedStrings["Line %d:%d"] = "Line %d:%d";
</span><span class="cx"> localizedStrings["Line Number"] = "Line Number";
</span><span class="cx"> localizedStrings["Linear Gradient"] = "Linear Gradient";
</span><ins>+localizedStrings["List Styles"] = "List Styles";
</ins><span class="cx"> localizedStrings["Live"] = "Live";
</span><span class="cx"> localizedStrings["Load \u2014 %s"] = "Load \u2014 %s";
</span><span class="cx"> localizedStrings["Local File"] = "Local File";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesListStylePositionInsidesvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/ListStylePositionInside.svg (0 => 194504)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/ListStylePositionInside.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/ListStylePositionInside.svg 2016-01-02 22:32:57 UTC (rev 194504)
</span><span class="lines">@@ -0,0 +1,6 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Devin Rousso <dcrousso+webkit@gmail.com>. All rights reserved. -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <circle fill="currentColor" stroke="currentColor" cx="8" cy="7.5" r="2.5"/>
+ <rect fill="none" stroke="currentColor" x="1" y="2" width="14" height="11"/>
+</svg>
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesListStylePositionOutsidesvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/ListStylePositionOutside.svg (0 => 194504)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/ListStylePositionOutside.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/ListStylePositionOutside.svg 2016-01-02 22:32:57 UTC (rev 194504)
</span><span class="lines">@@ -0,0 +1,6 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Devin Rousso <dcrousso+webkit@gmail.com>. All rights reserved. -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <circle fill="currentColor" stroke="currentColor" cx="3.5" cy="7.5" r="2.5"/>
+ <rect fill="none" stroke="currentColor" x="9" y="2" width="6" height="11"/>
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (194503 => 194504)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-01-02 22:22:10 UTC (rev 194503)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-01-02 22:32:57 UTC (rev 194504)
</span><span class="lines">@@ -599,6 +599,7 @@
</span><span class="cx"> <script src="Views/VisualStyleTabbedPropertiesRow.js"></script>
</span><span class="cx"> <script src="Views/VisualStyleTimingEditor.js"></script>
</span><span class="cx"> <script src="Views/VisualStyleUnitSlider.js"></script>
</span><ins>+ <script src="Views/VisualStyleURLInput.js"></script>
</ins><span class="cx">
</span><span class="cx"> <script src="Controllers/Annotator.js"></script>
</span><span class="cx"> <script src="Controllers/CodeMirrorEditingController.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js (194503 => 194504)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2016-01-02 22:22:10 UTC (rev 194503)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2016-01-02 22:32:57 UTC (rev 194504)
</span><span class="lines">@@ -89,8 +89,9 @@
</span><span class="cx"> this._generateSection("border", WebInspector.UIString("Border"));
</span><span class="cx"> this._generateSection("outline", WebInspector.UIString("Outline"));
</span><span class="cx"> this._generateSection("box-shadow", WebInspector.UIString("Box Shadow"));
</span><ins>+ this._generateSection("list-style", WebInspector.UIString("List Styles"));
</ins><span class="cx">
</span><del>- 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]);
</del><ins>+ 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._groups.listStyle.section]);
</ins><span class="cx"> this.element.appendChild(this._sections.background.element);
</span><span class="cx">
</span><span class="cx"> // Animation Section
</span><span class="lines">@@ -1044,6 +1045,33 @@
</span><span class="cx"> this._populateSection(group, [boxShadow]);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _populateListStyleSection()
+ {
+ let group = this._groups.listStyle;
+ let properties = group.properties;
+
+ let listStyleTypeRow = new WebInspector.DetailsSectionRow;
+
+ properties.listStyleType = new WebInspector.VisualStyleKeywordPicker("list-style-type", WebInspector.UIString("Type"), {
+ basic: this._keywords.defaults.concat(["None", "Circle", "Disc", "Square", "Decimal", "Lower Alpha", "Upper Alpha", "Lower Roman", "Upper Roman"]),
+ advanced: ["Decimal Leading Zero", "Asterisks", "Footnotes", "Binary", "Octal", "Lower Hexadecimal", "Upper Hexadecimal", "Lower Latin", "Upper Latin", "Lower Greek", "Upper Greek", "Arabic Indic", "Hebrew", "Hiragana", "Katakana", "Hiragana Iroha", "Katakana Iroha", "CJK Earthly Branch", "CJK Heavenly Stem", "CJK Ideographic", "Bengali", "Cambodian", "Khmer", "Devanagari", "Gujarati", "Gurmukhi", "Kannada", "Lao", "Malayalam", "Mongolian", "Myanmar", "Oriya", "Persian", "Urdu", "Telugu", "Armenian", "Lower Armenian", "Upper Armenian", "Georgian", "Tibetan", "Thai&q
uot;, "Afar", "Hangul Consonant", "Hangul", "Lower Norwegian", "Upper Norwegian", "Ethiopic", "Ethiopic Halehame Gez", "Ethiopic Halehame Aa Et", "Ethiopic Halehame Aa Er", "Oromo", "Ethiopic Halehame Om Et", "Sidama", "Ethiopic Halehame Sid Et", "Somali", "Ethiopic Halehame So Et", "Amharic", "Ethiopic Halehame Am Et", "Tigre", "Ethiopic Halehame Tig", "Tigrinya Er", "Ethiopic Halehame Ti Er", "Tigrinya Et", "Ethiopic Halehame Ti Et", "Ethiopic Abegede", "Ethiopic Abegede Gez", "Amharic Abegede", "Ethiopic Abegede Am Et", "Tigrinya Er Abegede", "Ethiopic Abegede Ti Er", "Tigrinya Et Abegede", "Ethiopic Abegede Ti Et"]
+ });
+
+ properties.listStylePosition = new WebInspector.VisualStyleKeywordIconList("list-style-position", WebInspector.UIString("Position"), ["Outside", "Inside", "Initial"]);
+
+ listStyleTypeRow.element.appendChild(properties.listStyleType.element);
+ listStyleTypeRow.element.appendChild(properties.listStylePosition.element);
+
+ let listStyleImageRow = new WebInspector.DetailsSectionRow;
+
+ properties.listStyleImage = new WebInspector.VisualStyleURLInput("list-style-image", WebInspector.UIString("Image"), this._keywords.defaults.concat(["None"]));
+
+ listStyleImageRow.element.appendChild(properties.listStyleImage.element);
+
+ let listStyle = new WebInspector.DetailsSectionGroup([listStyleTypeRow, listStyleImageRow]);
+ this._populateSection(group, [listStyle]);
+ }
+
</ins><span class="cx"> _populateTransitionSection()
</span><span class="cx"> {
</span><span class="cx"> let group = this._groups.transition;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleKeywordIconListcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.css (194503 => 194504)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.css 2016-01-02 22:22:10 UTC (rev 194503)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.css 2016-01-02 22:32:57 UTC (rev 194504)
</span><span class="lines">@@ -35,6 +35,7 @@
</span><span class="cx"> position: relative;
</span><span class="cx"> width: 26px;
</span><span class="cx"> height: 18px;
</span><ins>+ color: black;
</ins><span class="cx"> background-color: hsl(0, 100%, 100%);
</span><span class="cx"> border: 1px solid hsl(0, 0%, 83%);
</span><span class="cx"> border-right: none;
</span><span class="lines">@@ -54,11 +55,11 @@
</span><span class="cx"> .visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:matches(.computed, .selected) {
</span><span class="cx"> width: 27px;
</span><span class="cx"> border-right: 1px solid;
</span><del>- border-color: hsl(213, 92%, 55%);
</del><ins>+ border-color: hsl(212, 92%, 54%);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon.selected {
</span><del>- background-color: hsl(213, 92%, 55%);
</del><ins>+ background-color: hsl(212, 92%, 54%);
</ins><span class="cx"> color: hsl(0, 100%, 100%);
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleKeywordIconListjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.js (194503 => 194504)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.js 2016-01-02 22:22:10 UTC (rev 194503)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.js 2016-01-02 22:32:57 UTC (rev 194504)
</span><span class="lines">@@ -36,12 +36,8 @@
</span><span class="cx"> this._computedIcon = null;
</span><span class="cx"> this._selectedIcon = null;
</span><span class="cx">
</span><del>- function dashToCapital(match) {
- return match[1].toUpperCase();
- }
</del><ins>+ let prettyPropertyReferenceName = this._propertyReferenceName.capitalize().replace(/(-.)/g, (match) => match[1].toUpperCase());
</ins><span class="cx">
</span><del>- let prettyPropertyReferenceName = this._propertyReferenceName.capitalize().replace(/(-.)/g, dashToCapital);
-
</del><span class="cx"> function createListItem(value, title) {
</span><span class="cx"> let iconButtonElement = document.createElement("button");
</span><span class="cx"> iconButtonElement.id = value;
</span><span class="lines">@@ -49,7 +45,7 @@
</span><span class="cx"> iconButtonElement.classList.add("keyword-icon");
</span><span class="cx"> iconButtonElement.addEventListener("click", this._handleKeywordChanged.bind(this));
</span><span class="cx">
</span><del>- let imageName = value === "none" ? "VisualStyleNone" : prettyPropertyReferenceName + title.replace(/\s/g, "");
</del><ins>+ let imageName = (value === "none" || value === "initial") ? "VisualStyleNone" : prettyPropertyReferenceName + title.replace(/\s/g, "");
</ins><span class="cx"> iconButtonElement.appendChild(useSVGSymbol("Images/" + imageName + ".svg"));
</span><span class="cx">
</span><span class="cx"> return iconButtonElement;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleURLInputjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleURLInput.js (0 => 194504)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleURLInput.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleURLInput.js 2016-01-02 22:32:57 UTC (rev 194504)
</span><span class="lines">@@ -0,0 +1,75 @@
</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.VisualStyleURLInput = class VisualStyleURLInput extends WebInspector.VisualStylePropertyEditor
+{
+ constructor(propertyNames, text, possibleValues, layoutReversed)
+ {
+ super(propertyNames, text, possibleValues, null, "url-input", layoutReversed);
+
+ this._urlInputElement = document.createElement("input");
+ this._urlInputElement.type = "url";
+ this._urlInputElement.placeholder = WebInspector.UIString("Enter a URL");
+ this._urlInputElement.addEventListener("keyup", this._valueDidChange.bind(this));
+ this.contentElement.appendChild(this._urlInputElement);
+ }
+
+ // Public
+
+ get value()
+ {
+ return this._urlInputElement.value;
+ }
+
+ set value(value)
+ {
+ if ((value && value === this.value) || this._propertyMissing)
+ return;
+
+ this._urlInputElement.value = value;
+ }
+
+ get synthesizedValue()
+ {
+ let value = this.value;
+ if (!value || !value.length)
+ return null;
+
+ if (this.valueIsSupportedKeyword(value))
+ return value;
+
+ return "url(" + value + ")";
+ }
+
+ // Protected
+
+ parseValue(text)
+ {
+ if (this.valueIsSupportedKeyword(text))
+ return [text, text];
+
+ return /^(?:url\(\s*)([^\)]*)(?:\s*\)\s*;?)$/.exec(text);
+ }
+};
</ins></span></pre>
</div>
</div>
</body>
</html>