Skip to content
Permalink
Browse files
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:


Canonical link: https://commits.webkit.org/192089@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@220462 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
NV committed Aug 9, 2017
1 parent 9a759b8 commit d5fc3bf82d198c09f35b1b5462de8922fc337244
@@ -1,3 +1,38 @@
2017-08-09 Nikita Vasilyev <nvasilyev@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 <drousso@apple.com>

Web Inspector: Canvas: support editing WebGL shaders
@@ -152,6 +152,7 @@
<link rel="stylesheet" href="Views/ResourceTimelineDataGridNode.css">
<link rel="stylesheet" href="Views/ResourceTreeElement.css">
<link rel="stylesheet" href="Views/RulesStyleDetailsPanel.css">
<link rel="stylesheet" href="Views/RulesStyleSpreadsheetDetailsPanel.css">
<link rel="stylesheet" href="Views/ScopeBar.css">
<link rel="stylesheet" href="Views/ScopeChainDetailsSidebarPanel.css">
<link rel="stylesheet" href="Views/ScopeRadioButtonNavigationItem.css">
@@ -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;
}
@@ -28,6 +28,44 @@ WI.RulesStyleSpreadsheetDetailsPanel = class RulesStyleSpreadsheetDetailsPanel e
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="#"><span 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="#"><span 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="#"><span 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

0 comments on commit d5fc3bf

Please sign in to comment.