Diff
Modified: branches/safari-601-branch/Source/WebInspectorUI/ChangeLog (193070 => 193071)
--- branches/safari-601-branch/Source/WebInspectorUI/ChangeLog 2015-12-03 18:43:04 UTC (rev 193070)
+++ branches/safari-601-branch/Source/WebInspectorUI/ChangeLog 2015-12-03 18:43:11 UTC (rev 193071)
@@ -1,5 +1,55 @@
2015-12-02 Timothy Hatcher <[email protected]>
+ Merge r188029. rdar://problem/23221163
+
+ 2015-08-05 Devin Rousso <[email protected]>
+
+ Web Inspector: Move the Metrics style sidebar panel into Computed
+ https://bugs.webkit.org/show_bug.cgi?id=147715
+
+ Reviewed by Timothy Hatcher.
+
+ Deleted the Metrics sidebar panel and moved its contents into the Computed sidebar panel.
+ In addition, not hovering over the Metrics section will display the colors of each box.
+
+ * UserInterface/Main.html:
+ * UserInterface/Views/BoxModelDetailsSectionRow.css:
+ (.details-section .row.box-model :matches(.position, .margin, .border, .padding, .content)):
+ (.details-section .row.box-model .position):
+ (.details-section .row.box-model .margin):
+ (.details-section .row.box-model .border):
+ (.details-section .row.box-model .padding):
+ (.details-section .row.box-model :matches(.content span, .top, .right, .bottom, .left)):
+ (.details-section .row.box-model :matches(.right, .left)):
+ (.details-section .row.box-model .content): Deleted.
+ (.details-section .row.box-model .content span): Deleted.
+ (.details-section .row.box-model .left): Deleted.
+ (.details-section .row.box-model .right): Deleted.
+ (.details-section .row.box-model .top): Deleted.
+ (.details-section .row.box-model .bottom): Deleted.
+
+ * UserInterface/Views/BoxModelDetailsSectionRow.js:
+ (WebInspector.BoxModelDetailsSectionRow.prototype._highlightDOMNode):
+ If no metric box is hovered, apply a class to the entire section.
+
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
+ (WebInspector.CSSStyleDetailsSidebarPanel):
+ Removed the usage of MetricsStyleDetailsPanel.
+
+ * UserInterface/Views/ComputedStyleDetailsPanel.css:
+ (.details-section.style-box-model:not(.collapsed) > :matches(.header, .content)):
+ Give the metrics section in the Computed panel a white background.
+
+ * UserInterface/Views/ComputedStyleDetailsPanel.js:
+ (WebInspector.ComputedStyleDetailsPanel):
+ (WebInspector.ComputedStyleDetailsPanel.prototype.refresh):
+ Don't refresh the content unless the change is significant (without this, you cannot edit
+ metrics values using the arrow keys).
+
+ * UserInterface/Views/MetricsStyleDetailsPanel.js: Removed.
+
+2015-12-02 Timothy Hatcher <[email protected]>
+
Merge r188028. rdar://problem/23221163
2015-08-05 Devin Rousso <[email protected]>
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html (193070 => 193071)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html 2015-12-03 18:43:04 UTC (rev 193070)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html 2015-12-03 18:43:11 UTC (rev 193071)
@@ -467,7 +467,6 @@
<script src=""
<script src=""
<script src=""
- <script src=""
<script src=""
<script src=""
<script src=""
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css (193070 => 193071)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css 2015-12-03 18:43:04 UTC (rev 193070)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css 2015-12-03 18:43:11 UTC (rev 193071)
@@ -37,97 +37,68 @@
padding-right: 2px;
}
-.details-section .row.box-model .position {
- border: 1px hsl(0, 0%, 65%) dotted;
- background-color: hsl(0, 0%, 90%);
+.details-section .row.box-model :matches(.position, .margin, .border, .padding, .content) {
+ border: 1px solid grey;
+ background-color: white;
display: inline-block;
text-align: center;
+ vertical-align: middle;
padding: 3px;
margin: 3px;
}
+.details-section .row.box-model .position {
+ border-style: dotted;
+}
+
.details-section .row.box-model .margin {
- border: 1px dashed;
- background-color: hsl(0, 0%, 90%);
- display: inline-block;
- text-align: center;
- vertical-align: middle;
- padding: 3px;
- margin: 3px;
+ border-style: dashed;
+ border-color: black;
}
+.details-section .row.box-model:not(.hovered) .margin,
.details-section .row.box-model .margin.active {
background-color: hsla(30, 88%, 69%, 0.66);
}
.details-section .row.box-model .border {
- border: 1px black solid;
- background-color: hsl(0, 0%, 90%);
- display: inline-block;
- text-align: center;
- vertical-align: middle;
- padding: 3px;
- margin: 3px;
+ border-color: black;
}
+.details-section .row.box-model:not(.hovered) .border,
.details-section .row.box-model .border.active {
background-color: hsla(44, 100%, 80%, 0.66);
}
.details-section .row.box-model .padding {
- border: 1px grey dashed;
- background-color: hsl(0, 0%, 90%);
- display: inline-block;
- text-align: center;
- vertical-align: middle;
- padding: 3px;
- margin: 3px;
+ border-style: dashed;
}
+.details-section .row.box-model:not(.hovered) .padding,
.details-section .row.box-model .padding.active {
background-color: hsla(101, 37%, 62%, 0.55);
}
.details-section .row.box-model .content {
position: static;
- border: 1px gray solid;
- background-color: hsl(0, 0%, 90%);
- display: inline-block;
- text-align: center;
- vertical-align: middle;
- padding: 3px;
- margin: 3px;
min-width: 80px;
overflow: visible;
}
+.details-section .row.box-model:not(.hovered) .content,
.details-section .row.box-model .content.active {
background-color: hsla(208, 60%, 64%, 0.66);
}
-.details-section .row.box-model .content span {
- display: inline-block;
-}
-
.details-section .row.box-model .editing {
position: relative;
z-index: 100;
}
-.details-section .row.box-model .left {
+.details-section .row.box-model :matches(.content span, .top, .right, .bottom, .left) {
display: inline-block;
- vertical-align: middle;
}
-.details-section .row.box-model .right {
- display: inline-block;
+.details-section .row.box-model :matches(.right, .left) {
vertical-align: middle;
}
-
-.details-section .row.box-model .top {
- display: inline-block;
-}
-
-.details-section .row.box-model .bottom {
- display: inline-block;
-}
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js (193070 => 193071)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js 2015-12-03 18:43:04 UTC (rev 193070)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js 2015-12-03 18:43:11 UTC (rev 193071)
@@ -97,6 +97,8 @@
else
element.classList.remove("active");
}
+
+ this.element.classList.toggle("hovered", showHighlight);
}
_updateMetrics()
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (193070 => 193071)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2015-12-03 18:43:04 UTC (rev 193070)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2015-12-03 18:43:11 UTC (rev 193071)
@@ -68,13 +68,12 @@
this._computedStyleDetailsPanel = new WebInspector.ComputedStyleDetailsPanel(this);
this._rulesStyleDetailsPanel = new WebInspector.RulesStyleDetailsPanel(this);
- this._metricsStyleDetailsPanel = new WebInspector.MetricsStyleDetailsPanel(this);
this._computedStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
this._rulesStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
- this._panels = [this._computedStyleDetailsPanel, this._rulesStyleDetailsPanel, this._metricsStyleDetailsPanel];
- this._panelNavigationInfo = [this._computedStyleDetailsPanel.navigationInfo, this._rulesStyleDetailsPanel.navigationInfo, this._metricsStyleDetailsPanel.navigationInfo];
+ this._panels = [this._computedStyleDetailsPanel, this._rulesStyleDetailsPanel];
+ this._panelNavigationInfo = [this._computedStyleDetailsPanel.navigationInfo, this._rulesStyleDetailsPanel.navigationInfo];
this._lastSelectedSectionSetting = new WebInspector.Setting("last-selected-style-details-panel", this._rulesStyleDetailsPanel.navigationInfo.identifier);
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css (193070 => 193071)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css 2015-12-03 18:43:04 UTC (rev 193070)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css 2015-12-03 18:43:11 UTC (rev 193071)
@@ -51,3 +51,7 @@
.details-section > .content > .group > .row .CodeMirror-code pre:hover .go-to-arrow {
display: initial;
}
+
+.details-section.style-box-model:not(.collapsed) > :matches(.header, .content) {
+ background-color: white;
+}
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js (193070 => 193071)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2015-12-03 18:43:04 UTC (rev 193070)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2015-12-03 18:43:11 UTC (rev 193071)
@@ -88,6 +88,13 @@
this.element.appendChild(this._containerRegionsFlowSection.element);
this._resetFlowDetails();
+
+ this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
+
+ var boxModelGroup = new WebInspector.DetailsSectionGroup([this._boxModelDiagramRow]);
+ var boxModelSection = new WebInspector.DetailsSection("style-box-model", WebInspector.UIString("Box Model"), [boxModelGroup]);
+
+ this.element.appendChild(boxModelSection.element);
this.cssStyleDeclarationTextEditorShouldAddPropertyGoToArrows = true;
}
@@ -147,10 +154,18 @@
this._delegate.computedStyleDetailsPanelShowProperty(property);
}
- refresh()
+ refresh(significantChange)
{
+ // We only need to do a rebuild on significant changes. Other changes are handled
+ // by the sections and text editors themselves.
+ if (!significantChange) {
+ super.refresh();
+ return;
+ }
+
this._propertiesTextEditor.style = this.nodeStyles.computedStyle;
this._refreshFlowDetails(this.nodeStyles.node);
+ this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
super.refresh();
}
Deleted: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js (193070 => 193071)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js 2015-12-03 18:43:04 UTC (rev 193070)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js 2015-12-03 18:43:11 UTC (rev 193071)
@@ -1,48 +0,0 @@
-/*
- * Copyright (C) 2013, 2015 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.
- */
-
-WebInspector.MetricsStyleDetailsPanel = class MetricsStyleDetailsPanel extends WebInspector.StyleDetailsPanel
-{
- constructor(delegate)
- {
- super(delegate, "metrics", "metrics", WebInspector.UIString("Styles \u2014 Metrics"));
-
- this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
-
- var boxModelGroup = new WebInspector.DetailsSectionGroup([this._boxModelDiagramRow]);
- var boxModelSection = new WebInspector.DetailsSection("style-box-model", WebInspector.UIString("Box Model"), [boxModelGroup]);
-
- this.element.appendChild(boxModelSection.element);
- }
-
- // Public
-
- refresh()
- {
- this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
-
- super.refresh();
- }
-};
