Attachment 317270 Details for Bug 174838 – Patch

[patch] Patch

patch.txt (text/plain), 10.06 KB, created by Nikita Vasilyev on 2017-08-04 12:49:43 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Nikita Vasilyev

Created: 2017-08-04 12:49:43 PDT

Size: 10.06 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 6632874..bd3c49b 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,37 @@
>+2017-08-04  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 NOBODY (OOPS!).
>+
>+        Add a static HTML of three hard-coded CSS rules.
>+
>+        * 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-03  Joseph Pecoraro  <pecoraro@apple.com>
> 
>         JSContext Inspector: Scripts sometimes do not show in resources tab
>diff --git a/Source/WebInspectorUI/UserInterface/Main.html b/Source/WebInspectorUI/UserInterface/Main.html
>index c0ce67c..06e220f 100644
>--- a/Source/WebInspectorUI/UserInterface/Main.html
>+++ b/Source/WebInspectorUI/UserInterface/Main.html
>@@ -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">
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css b/Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css
>new file mode 100644
>index 0000000..4746a6c
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.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;
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.js b/Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.js
>index 1ba99af..4fb9ead 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.js
>@@ -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

Actions: View | Formatted Diff | Diff

Attachments on bug 174838: 317270 | 317642 | 317643 | 317759