Attachment 258559 Details for Bug 147360 – Patch

[patch] Patch

147360.txt (text/plain), 13.30 KB, created by Devin Rousso on 2015-08-07 21:49:09 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2015-08-07 21:49:09 PDT

Size: 13.30 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index bf8a683..ec92627 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,5 +1,43 @@
> 2015-08-07  Devin Rousso  <drousso@apple.com>
> 
>+        Web Inspector: Decrease the padding of each rule in the Rules sidebar to allow more content to show
>+        https://bugs.webkit.org/show_bug.cgi?id=147360
>+
>+        Reviewed by Timothy Hatcher.
>+
>+        Generally tightened the padding around each section in the rules panel, as well as the
>+        content inside each section. Also moved the new rule button to be next to the filter bar.
>+
>+        * UserInterface/Views/CSSStyleDeclarationSection.css:
>+        (.style-declaration-section):
>+        (.style-declaration-section.last-in-group):
>+        (.style-declaration-section.last-in-group + .style-declaration-section): Deleted.
>+        * UserInterface/Views/CSSStyleDeclarationTextEditor.css:
>+        (.css-style-text-editor):
>+        * UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
>+        (.sidebar > .panel.details.css-style > .content > .pseudo-classes):
>+        (.sidebar > .panel.details.css-style > .content + .options-container):
>+        (.sidebar > .panel.details.css-style > .content:not(.supports-new-rule, .has-filter-bar) + .options-container):
>+        (.sidebar > .panel.details.css-style > .content + .options-container > .new-rule):
>+        (.sidebar > .panel.details.css-style > .content + .options-container > .filter-bar):
>+        (.sidebar > .panel.details.css-style > .content:not(.has-filter-bar) + .options-container > .filter-bar):
>+        (.sidebar > .panel.details.css-style > .content.has-filter-bar + .filter-bar): Deleted.
>+        (.sidebar > .panel.details.css-style > .content:not(.has-filter-bar) + .filter-bar): Deleted.
>+        * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
>+        (WebInspector.CSSStyleDetailsSidebarPanel):
>+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._switchPanels):
>+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._newRuleButtonClicked):
>+        * UserInterface/Views/RulesStyleDetailsPanel.css:
>+        (.sidebar > .panel.details.css-style .rules .label):
>+        * UserInterface/Views/RulesStyleDetailsPanel.js:
>+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh.insertMediaOrInheritanceLabel):
>+        (WebInspector.RulesStyleDetailsPanel.prototype.newRuleButtonClicked):
>+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh.addNewRuleButton): Deleted.
>+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh): Deleted.
>+        (WebInspector.RulesStyleDetailsPanel.prototype._newRuleClicked): Deleted.
>+
>+2015-08-07  Devin Rousso  <drousso@apple.com>
>+
>         Web Inspector: Don't include zero-width space into a copied text from the console
>         https://bugs.webkit.org/show_bug.cgi?id=147767
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css
>index 6a9d2f2..b5411ad 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css
>@@ -27,7 +27,7 @@
>     display: flex;
>     flex-direction: column;
> 
>-    padding: 5px;
>+    padding: 3px;
> }
> 
> .style-declaration-section.locked {
>@@ -40,7 +40,7 @@
> }
> 
> .style-declaration-section.last-in-group {
>-    margin-bottom: 15px;
>+    margin-bottom: 10px;
> 
>     border-bottom: 1px solid hsla(0, 0%, 0%, 0.3);
> }
>@@ -49,12 +49,6 @@
>     border-top: 1px solid hsla(0, 0%, 0%, 0.15);
> }
> 
>-.style-declaration-section.last-in-group + .style-declaration-section {
>-    margin-top: 15px;
>-
>-    border-top-color: hsla(0, 0%, 0%, 0.3);
>-}
>-
> .style-declaration-section:last-child {
>     margin-bottom: 0 !important;
> }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css
>index e76e6b7..e36222b 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css
>@@ -25,7 +25,7 @@
> 
> .css-style-text-editor {
>     background-color: white;
>-    padding: 2px 0;
>+    padding: 2px 0 1px;
> }
> 
> .css-style-text-editor > .CodeMirror {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css
>index 3549000..f9c28dc 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css
>@@ -39,7 +39,7 @@
> }
> 
> .sidebar > .panel.details.css-style > .content > .pseudo-classes {
>-    padding: 10px;
>+    padding: 6px 10px;
>     border-bottom: 1px solid hsl(0, 0%, 70%);
> 
>     display: flex;
>@@ -65,15 +65,34 @@
>     white-space: nowrap;
> }
> 
>-.sidebar > .panel.details.css-style > .content.has-filter-bar + .filter-bar {
>+.sidebar > .panel.details.css-style > .content + .options-container {
>+    display: flex;
>     position: absolute;
>     bottom: 0;
>     width: 100%;
>+    height: 29px;
>     background-color: white;
>     border-top: 1px solid hsl(0, 0%, 70%);
> }
> 
>-.sidebar > .panel.details.css-style > .content:not(.has-filter-bar) + .filter-bar {
>+.sidebar > .panel.details.css-style > .content:not(.supports-new-rule, .has-filter-bar) + .options-container {
>+    display: none;
>+}
>+
>+.sidebar > .panel.details.css-style > .content + .options-container > .new-rule {
>+    width: 17px;
>+    height: 17px;
>+    margin: 5px 0 5px 7px;
>+    content: url(../Images/Plus.svg);
>+}
>+
>+.sidebar > .panel.details.css-style > .content + .options-container > .filter-bar {
>+    width: -webkit-fill-available;
>+    background-color: white;
>+}
>+
>+.sidebar > .panel.details.css-style > .content:not(.supports-new-rule) + .options-container > .new-rule,
>+.sidebar > .panel.details.css-style > .content:not(.has-filter-bar) + .options-container > .filter-bar {
>     display: none;
> }
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js
>index d5ca63a..6fd23d0 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js
>@@ -83,10 +83,21 @@ WebInspector.CSSStyleDetailsSidebarPanel = class CSSStyleDetailsSidebarPanel ext
>         this._navigationItem = new WebInspector.ScopeRadioButtonNavigationItem(this._identifier, this._displayName, this._panelNavigationInfo, selectedPanel.navigationInfo);
>         this._navigationItem.addEventListener(WebInspector.ScopeRadioButtonNavigationItem.Event.SelectedItemChanged, this._handleSelectedItemChanged, this);
> 
>+        var optionsContainer = document.createElement("div");
>+        optionsContainer.classList.add("options-container");
>+
>+        var newRuleButton = document.createElement("img");
>+        newRuleButton.classList.add("new-rule");
>+        newRuleButton.title = WebInspector.UIString("New Rule");
>+        newRuleButton.addEventListener("click", this._newRuleButtonClicked.bind(this));
>+        optionsContainer.appendChild(newRuleButton);
>+
>         this._filterBar = new WebInspector.FilterBar;
>         this._filterBar.placeholder = WebInspector.UIString("Filter Styles");
>         this._filterBar.addEventListener(WebInspector.FilterBar.Event.FilterDidChange, this._filterDidChange, this);
>-        this.element.appendChild(this._filterBar.element);
>+        optionsContainer.appendChild(this._filterBar.element);
>+
>+        this.element.appendChild(optionsContainer);
>     }
> 
>     // Public
>@@ -228,6 +239,7 @@ WebInspector.CSSStyleDetailsSidebarPanel = class CSSStyleDetailsSidebarPanel ext
>             if (this._filterBar)
>                 this.contentElement.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, hasFilter && this._filterBar.hasActiveFilters());
> 
>+            this.contentElement.classList.toggle("supports-new-rule", typeof this._selectedPanel.newRuleButtonClicked === "function");
>             this._selectedPanel.shown();
>         }
> 
>@@ -259,6 +271,12 @@ WebInspector.CSSStyleDetailsSidebarPanel = class CSSStyleDetailsSidebarPanel ext
>         }
>     }
> 
>+    _newRuleButtonClicked()
>+    {
>+        if (this._selectedPanel && typeof this._selectedPanel.newRuleButtonClicked === "function")
>+            this._selectedPanel.newRuleButtonClicked();
>+    }
>+
>     _filterDidChange()
>     {
>         this.contentElement.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
>@@ -267,7 +285,7 @@ WebInspector.CSSStyleDetailsSidebarPanel = class CSSStyleDetailsSidebarPanel ext
>     }
> };
> 
>-WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = 38; // Default height of the forced pseudo classes container. Updated in widthDidChange.
>+WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = 30; // Default height of the forced pseudo classes container. Updated in widthDidChange.
> WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName = "filter-in-progress";
> WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName = "filter-section-has-label";
> WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName = "filter-matching";
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css b/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css
>index a64cf79..42dbb66 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css
>@@ -26,8 +26,7 @@
> .sidebar > .panel.details.css-style .rules .label {
>     color: hsl(0, 0%, 60%);
>     text-shadow: white 0 1px 0;
>-
>-    padding: 0 10px;
>+    padding: 0 8px;
> }
> 
> .sidebar > .panel.details.css-style .rules .label .go-to-link {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js
>index 14fdbe5..b3c110b 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js
>@@ -178,31 +178,13 @@ WebInspector.RulesStyleDetailsPanel = class RulesStyleDetailsPanel extends WebIn
>             previousSection = section;
>         }
> 
>-        function addNewRuleButton()
>+        function insertMediaOrInheritanceLabel(style)
>         {
>-            if (previousSection)
>+            if (previousSection && previousSection.style.type === WebInspector.CSSStyleDeclaration.Type.Inline)
>                 previousSection.lastInGroup = true;
> 
>-            if (!this.nodeStyles.node.isInShadowTree()) {
>-                var newRuleButton = document.createElement("div");
>-                newRuleButton.className = "new-rule";
>-                newRuleButton.addEventListener("click", this._newRuleClicked.bind(this));
>-
>-                newRuleButton.append(document.createElement("img"), WebInspector.UIString("New Rule"));
>-
>-                newDOMFragment.appendChild(newRuleButton);
>-            }
>-
>-            addedNewRuleButton = true;
>-        }
>-
>-        function insertMediaOrInheritanceLabel(style)
>-        {
>             var hasMediaOrInherited = [];
> 
>-            if (style.type === WebInspector.CSSStyleDeclaration.Type.Rule && !addedNewRuleButton)
>-                addNewRuleButton.call(this);
>-
>             if (previousSection && previousSection.style.node !== style.node) {
>                 previousSection.lastInGroup = true;
> 
>@@ -297,9 +279,7 @@ WebInspector.RulesStyleDetailsPanel = class RulesStyleDetailsPanel extends WebIn
>             }
>         }
> 
>-        var addedNewRuleButton = false;
>         this._ruleMediaAndInherticanceList = [];
>-
>         var orderedStyles = uniqueOrderedStyles(this.nodeStyles.orderedStyles);
>         for (var style of orderedStyles) {
>             var isUserAgentStyle = style.ownerRule && style.ownerRule.type === WebInspector.CSSRule.Type.UserAgent;
>@@ -312,9 +292,6 @@ WebInspector.RulesStyleDetailsPanel = class RulesStyleDetailsPanel extends WebIn
>         // Just in case there are any pseudo-selectors left that haven't been added.
>         insertAllMatchingPseudoStyles.call(this, true);
> 
>-        if (!addedNewRuleButton)
>-            addNewRuleButton.call(this);
>-
>         if (previousSection)
>             previousSection.lastInGroup = true;
> 
>@@ -416,6 +393,15 @@ WebInspector.RulesStyleDetailsPanel = class RulesStyleDetailsPanel extends WebIn
>         this._focusNextNewInspectorRule = true;
>     }
> 
>+    newRuleButtonClicked()
>+    {
>+        if (this.nodeStyles.node.isInShadowTree())
>+            return;
>+
>+        this._focusNextNewInspectorRule = true;
>+        this.nodeStyles.addEmptyRule();
>+    }
>+
>     // Protected
> 
>     shown()
>@@ -464,12 +450,6 @@ WebInspector.RulesStyleDetailsPanel = class RulesStyleDetailsPanel extends WebIn
> 
>     // Private
> 
>-    _newRuleClicked(event)
>-    {
>-        this._focusNextNewInspectorRule = true;
>-        this.nodeStyles.addEmptyRule();
>-    }
>-
>     _removeSectionWithActiveEditor(event)
>     {
>         this._sectionWithActiveEditor.removeEventListener(WebInspector.CSSStyleDeclarationSection.Event.Blurred, this._boundRemoveSectionWithActiveEditor);

Actions: View | Formatted Diff | Diff

Attachments on bug 147360: 257651 | 257652 | 257653 | 257659 | 258559