- Revision
- 188029
- Author
- drou...@apple.com
- Date
- 2015-08-05 23:24:09 -0700 (Wed, 05 Aug 2015)
Log Message
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.
Modified Paths
Removed Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (188028 => 188029)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-08-06 06:17:59 UTC (rev 188028)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-08-06 06:24:09 UTC (rev 188029)
@@ -1,5 +1,51 @@
2015-08-05 Devin Rousso <drou...@apple.com>
+ 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-08-05 Devin Rousso <drou...@apple.com>
+
Web Inspector: Bezier curve visual editor
https://bugs.webkit.org/show_bug.cgi?id=134501
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (188028 => 188029)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-08-06 06:17:59 UTC (rev 188028)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-08-06 06:24:09 UTC (rev 188029)
@@ -467,7 +467,6 @@
<script src=""
<script src=""
<script src=""
- <script src=""
<script src=""
<script src=""
<script src=""
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css (188028 => 188029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css 2015-08-06 06:17:59 UTC (rev 188028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css 2015-08-06 06:24:09 UTC (rev 188029)
@@ -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: trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js (188028 => 188029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js 2015-08-06 06:17:59 UTC (rev 188028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js 2015-08-06 06:24:09 UTC (rev 188029)
@@ -97,6 +97,8 @@
else
element.classList.remove("active");
}
+
+ this.element.classList.toggle("hovered", showHighlight);
}
_updateMetrics()
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (188028 => 188029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2015-08-06 06:17:59 UTC (rev 188028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2015-08-06 06:24:09 UTC (rev 188029)
@@ -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: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css (188028 => 188029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css 2015-08-06 06:17:59 UTC (rev 188028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css 2015-08-06 06:24:09 UTC (rev 188029)
@@ -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: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js (188028 => 188029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2015-08-06 06:17:59 UTC (rev 188028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2015-08-06 06:24:09 UTC (rev 188029)
@@ -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: trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js (188028 => 188029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js 2015-08-06 06:17:59 UTC (rev 188028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js 2015-08-06 06:24:09 UTC (rev 188029)
@@ -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();
- }
-};
