Diff
Modified: branches/safari-601-branch/Source/WebInspectorUI/ChangeLog (193073 => 193074)
--- branches/safari-601-branch/Source/WebInspectorUI/ChangeLog 2015-12-03 18:43:22 UTC (rev 193073)
+++ branches/safari-601-branch/Source/WebInspectorUI/ChangeLog 2015-12-03 18:43:28 UTC (rev 193074)
@@ -1,5 +1,47 @@
2015-12-02 Timothy Hatcher <[email protected]>
+ Merge r188188. rdar://problem/23221163
+
+ 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-12-02 Timothy Hatcher <[email protected]>
+
Merge r188184. rdar://problem/23221163
2015-08-07 Devin Rousso <[email protected]>
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css (193073 => 193074)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css 2015-12-03 18:43:22 UTC (rev 193073)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css 2015-12-03 18:43:28 UTC (rev 193074)
@@ -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: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css (193073 => 193074)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css 2015-12-03 18:43:22 UTC (rev 193073)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css 2015-12-03 18:43:28 UTC (rev 193074)
@@ -25,7 +25,7 @@
.css-style-text-editor {
background-color: white;
- padding: 2px 0;
+ padding: 2px 0 1px;
}
.css-style-text-editor > .CodeMirror {
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css (193073 => 193074)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2015-12-03 18:43:22 UTC (rev 193073)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2015-12-03 18:43:28 UTC (rev 193074)
@@ -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: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (193073 => 193074)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2015-12-03 18:43:22 UTC (rev 193073)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2015-12-03 18:43:28 UTC (rev 193074)
@@ -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: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css (193073 => 193074)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css 2015-12-03 18:43:22 UTC (rev 193073)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css 2015-12-03 18:43:28 UTC (rev 193074)
@@ -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: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js (193073 => 193074)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2015-12-03 18:43:22 UTC (rev 193073)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2015-12-03 18:43:28 UTC (rev 193074)
@@ -178,32 +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.appendChild(document.createElement("img"));
- newRuleButton.appendChild(document.createTextNode(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;
@@ -302,9 +283,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;
@@ -317,9 +296,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;
@@ -421,6 +397,15 @@
this._focusNextNewInspectorRule = true;
}
+ newRuleButtonClicked()
+ {
+ if (this.nodeStyles.node.isInShadowTree())
+ return;
+
+ this._focusNextNewInspectorRule = true;
+ this.nodeStyles.addEmptyRule();
+ }
+
// Protected
shown()
@@ -469,12 +454,6 @@
// Private
- _newRuleClicked(event)
- {
- this._focusNextNewInspectorRule = true;
- this.nodeStyles.addEmptyRule();
- }
-
_removeSectionWithActiveEditor(event)
{
this._sectionWithActiveEditor.removeEventListener(WebInspector.CSSStyleDeclarationSection.Event.Blurred, this._boundRemoveSectionWithActiveEditor);
