Modified: trunk/Source/WebInspectorUI/ChangeLog (220461 => 220462)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-08-09 17:23:16 UTC (rev 220461)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-08-09 17:46:27 UTC (rev 220462)
@@ -1,3 +1,38 @@
+2017-08-09 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Styles: Add pre-populated data to spreadsheet-style view
+ https://bugs.webkit.org/show_bug.cgi?id=174838
+ <rdar://problem/33523220>
+
+ Reviewed by Matt Baker.
+
+ This patch adds static content to the experimental RulesStyleSpreadsheetDetailsPanel.
+ The static content will be replaced with actual data in the follow up patches.
+
+ * UserInterface/Main.html:
+ * UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css: Added.
+ (.style-spreadsheet .style-rule):
+ (.style-spreadsheet .selector-line):
+ (.style-spreadsheet .selector):
+ (.style-spreadsheet :matches(.selector .matched, .selector:focus)):
+ (.style-spreadsheet .name):
+ (.style-spreadsheet .value):
+ (.style-spreadsheet :matches(.selector, .name, .value)):
+ (.style-spreadsheet :matches(.selector, .name, .value):focus):
+ (.style-spreadsheet .selector-inline):
+ (.style-spreadsheet .property):
+ (.style-spreadsheet .property-disabled,):
+ (.style-spreadsheet .property-disabled :matches(.name, .value)):
+ (.style-spreadsheet .styles-source):
+ (.style-spreadsheet :matches(a, .node-link)):
+ (.style-spreadsheet :matches(a, .node-link):hover):
+ (.style-spreadsheet .inherited):
+ (.style-spreadsheet .declarations):
+ (.style-spreadsheet input[type="checkbox"]):
+ (.style-spreadsheet input[type="checkbox"]:not(:checked)):
+ (.style-spreadsheet .declarations:hover input[type="checkbox"]):
+ * UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.js:
+
2017-08-08 Devin Rousso <drou...@apple.com>
Web Inspector: Canvas: support editing WebGL shaders
Added: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css (0 => 220462)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css 2017-08-09 17:46:27 UTC (rev 220462)
@@ -0,0 +1,133 @@
+/*
+ * Copyright (C) 2017 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.
+ */
+
+.style-spreadsheet .style-rule {
+ font-family: Menlo, monospace;
+ -webkit-user-select: text;
+ padding: 4px 6px;
+ margin: 0;
+
+ color: hsl(0, 0%, 70%);
+ background: white;
+ border-bottom: 0.5px solid hsla(0, 0%, 0%, 0.2);
+}
+
+.style-spreadsheet .selector-line {
+ float: left;
+}
+
+.style-spreadsheet .selector {
+ color: hsl(0, 0%, 50%);
+ word-wrap: break-word;
+}
+
+.style-spreadsheet :matches(.selector .matched, .selector:focus) {
+ color: black;
+}
+
+.style-spreadsheet .name {
+ color: var(--syntax-highlight-boolean-color);
+}
+
+.style-spreadsheet .value {
+ color: black;
+}
+
+.style-spreadsheet :matches(.selector, .name, .value) {
+ -webkit-user-modify: read-write-plaintext-only;
+}
+
+.style-spreadsheet :matches(.selector, .name, .value):focus {
+ outline: 1px solid white;
+ box-shadow: 0 1px 2px 1px hsla(0, 0%, 0%, 0.6);
+}
+
+.style-spreadsheet .selector-inline {
+ -webkit-user-modify: read-only;
+ color: hsl(0, 0%, 50%);
+ font: 12px sans-serif;
+}
+
+.style-spreadsheet .property {
+ padding-left: 16px;
+}
+
+.style-spreadsheet .property-disabled,
+.style-spreadsheet .property-disabled * {
+ color: hsl(119, 100%, 22%);
+}
+
+.style-spreadsheet .property-disabled :matches(.name, .value) {
+ -webkit-user-modify: read-only;
+}
+
+.style-spreadsheet .styles-source {
+ float: right;
+ font: 11px sans-serif;
+ max-width: 100%;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+
+ margin-top: -1px;
+}
+
+.style-spreadsheet :matches(a, .node-link) {
+ color: hsl(0, 0%, 50%);
+}
+
+.style-spreadsheet :matches(a, .node-link):hover {
+ color: hsl(0, 0%, 33%);
+}
+
+.style-spreadsheet .inherited {
+ color: hsl(0, 0%, 60%);
+ text-shadow: white 0 1px 0;
+ padding: 4px 6px;
+ border-bottom: 0.5px solid hsla(0, 0%, 0%, 0.2);
+}
+
+.style-spreadsheet .declarations {
+ clear: left;
+ position: relative;
+}
+
+.style-spreadsheet input[type="checkbox"] {
+ visibility: hidden;
+
+ position: absolute;
+ left: 0;
+
+ height: 11px;
+ margin: 0;
+}
+
+.style-spreadsheet input[type="checkbox"]:not(:checked) {
+ visibility: visible;
+}
+
+.style-spreadsheet .declarations:hover input[type="checkbox"] {
+ visibility: visible;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.js (220461 => 220462)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.js 2017-08-09 17:23:16 UTC (rev 220461)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.js 2017-08-09 17:46:27 UTC (rev 220462)
@@ -28,6 +28,44 @@
constructor(delegate)
{
super(delegate, "rules", "rules", WI.UIString("Styles \u2014 Rules"));
+
+ let styleSpreadsheetElement = document.createElement("div");
+ styleSpreadsheetElement.classList.add("style-spreadsheet");
+ styleSpreadsheetElement.innerHTML = `
+<section class="style-rule"><span class="selector selector-inline">Style Attribute</span> { }</section>
+
+<section class="style-rule">
+<span class="styles-source"><a href="" class="resource-name">styleRule.css</span><span class="line-info">:24</span></a></span>
+<span class="selector-line"><span class="selector"><span class="matched">h1</span>, h2</span> {</span>
+<div class="declarations">
+ <div class="property"><input type="checkbox" checked><span class="name">font</span>: <span class="value">14px/32px sans-serif</span>;</div>
+ <div class="property"><input type="checkbox" checked><span class="name">margin</span>: <span class="value">0</span>;</div>
+ <div class="property"><input type="checkbox" checked><span class="name">padding</span>: <span class="value">8px 16px</span>;</div>
+}</div></section>
+
+<section class="style-rule">
+<span class="styles-source"><a href="" class="resource-name">webkit.org</span><span class="line-info">:110</span></a></span>
+<span class="selector-line"><span class="selector"><span class="matched">.home .page-layer</span></span> {</span>
+<div class="declarations">
+ <div class="property"><input type="checkbox" checked><span class="name">background-color</span>: <span class="value">#f7f7f7</span>;</div>
+ <div class="property"><input type="checkbox" checked><span class="name">border-top</span>: <span class="value">1px solid #e7e7e7</span>;</div>
+ <div class="property"><input type="checkbox" checked><span class="name">position</span>: <span class="value">relative</span>;</div>
+ <div class="property"><input type="checkbox" checked><span class="name">z-index</span>: <span class="value">1</span>;</div>
+}</div></section>
+
+<section class="inherited"><strong>Inherited From: </strong><span role="link" title="body" class="node-link">body</span></section>
+
+<section class="style-rule">
+<span class="styles-source"><a href="" class="resource-name">style.css</span><span class="line-info">:39</span></a></span>
+<span class="selector-line"><span class="selector"><span class="matched">body</span></span> {</span>
+<div class="declarations">
+ <div class="property"><input type="checkbox" checked><span class="name">background-color</span>: <span class="value">#f7f7f7</span>;</div>
+ <div class="property"><input type="checkbox" checked><span class="name">font-size</span>: <span class="value">1.6rem</span>;</div>
+ <div class="property property-disabled"><input type="checkbox">/* <span class="name">font-weight</span>: <span class="value">400</span>; */</div>
+ <div class="property"><input type="checkbox" checked><span class="name">line-height</span>: <span class="value">1.4</span>;</div>
+}</div></section>`;
+
+ this.element.append(styleSpreadsheetElement);
}
// Public
