- Revision
- 188188
- Author
- [email protected]
- Date
- 2015-08-07 22:39:26 -0700 (Fri, 07 Aug 2015)
Log Message
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.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (188187 => 188188)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-08-08 05:39:06 UTC (rev 188187)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-08-08 05:39:26 UTC (rev 188188)
@@ -1,5 +1,43 @@
2015-08-07 Devin Rousso <[email protected]>
+ 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 <[email protected]>
+
Web Inspector: Don't include zero-width space into a copied text from the console
https://bugs.webkit.org/show_bug.cgi?id=147767
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css (188187 => 188188)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css 2015-08-08 05:39:06 UTC (rev 188187)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css 2015-08-08 05:39:26 UTC (rev 188188)
@@ -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;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css (188187 => 188188)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css 2015-08-08 05:39:06 UTC (rev 188187)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css 2015-08-08 05:39:26 UTC (rev 188188)
@@ -25,7 +25,7 @@
.css-style-text-editor {
background-color: white;
- padding: 2px 0;
+ padding: 2px 0 1px;
}
.css-style-text-editor > .CodeMirror {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css (188187 => 188188)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2015-08-08 05:39:06 UTC (rev 188187)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2015-08-08 05:39:26 UTC (rev 188188)
@@ -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,18 +65,37 @@
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;
+}
+
.sidebar > .panel.details.css-style > .content.filter-in-progress .filter-matching {
display: inline;
background-color: hsla(53, 83%, 53%, 0.5);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (188187 => 188188)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2015-08-08 05:39:06 UTC (rev 188187)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2015-08-08 05:39:26 UTC (rev 188188)
@@ -83,10 +83,21 @@
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 @@
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 @@
}
}
+ _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.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";
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css (188187 => 188188)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css 2015-08-08 05:39:06 UTC (rev 188187)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css 2015-08-08 05:39:26 UTC (rev 188188)
@@ -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 {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js (188187 => 188188)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2015-08-08 05:39:06 UTC (rev 188187)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2015-08-08 05:39:26 UTC (rev 188188)
@@ -178,31 +178,13 @@
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 @@
}
}
- 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 @@
// 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 @@
this._focusNextNewInspectorRule = true;
}
+ newRuleButtonClicked()
+ {
+ if (this.nodeStyles.node.isInShadowTree())
+ return;
+
+ this._focusNextNewInspectorRule = true;
+ this.nodeStyles.addEmptyRule();
+ }
+
// Protected
shown()
@@ -464,12 +450,6 @@
// Private
- _newRuleClicked(event)
- {
- this._focusNextNewInspectorRule = true;
- this.nodeStyles.addEmptyRule();
- }
-
_removeSectionWithActiveEditor(event)
{
this._sectionWithActiveEditor.removeEventListener(WebInspector.CSSStyleDeclarationSection.Event.Blurred, this._boundRemoveSectionWithActiveEditor);
