Title: [204496] trunk/Source/WebInspectorUI
- Revision
- 204496
- Author
- [email protected]
- Date
- 2016-08-15 22:14:17 -0700 (Mon, 15 Aug 2016)
Log Message
Web Inspector: Large class lists are not easily discoverable with "Classes" quick-toggle
https://bugs.webkit.org/show_bug.cgi?id=160856
Patch by Devin Rousso <[email protected]> on 2016-08-15
Reviewed by Joseph Pecoraro.
* UserInterface/Base/DOMUtilities.js:
(WebInspector.linkifyNodeReference):
Add option to truncate the text of the linkified node.
* UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
(.sidebar > .panel.details.css-style > .content ~ .class-list-container):
Increase the max-height to partially show additional classes if many are set.
* UserInterface/Views/RulesStyleDetailsPanel.js:
(WebInspector.RulesStyleDetailsPanel.prototype.refresh.insertMediaOrInheritanceLabel):
Trucate the name of inherited nodes so they don't take up as much space in the sidebar.
* UserInterface/Views/VisualStyleSelectorSection.css:
(.details-section.visual-style-selector-section > .header > .current-selector): Deleted.
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > .titles): Deleted.
Removed since they are already inherited.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (204495 => 204496)
--- trunk/Source/WebInspectorUI/ChangeLog 2016-08-16 04:17:36 UTC (rev 204495)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-08-16 05:14:17 UTC (rev 204496)
@@ -1,5 +1,29 @@
2016-08-15 Devin Rousso <[email protected]>
+ Web Inspector: Large class lists are not easily discoverable with "Classes" quick-toggle
+ https://bugs.webkit.org/show_bug.cgi?id=160856
+
+ Reviewed by Joseph Pecoraro.
+
+ * UserInterface/Base/DOMUtilities.js:
+ (WebInspector.linkifyNodeReference):
+ Add option to truncate the text of the linkified node.
+
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container):
+ Increase the max-height to partially show additional classes if many are set.
+
+ * UserInterface/Views/RulesStyleDetailsPanel.js:
+ (WebInspector.RulesStyleDetailsPanel.prototype.refresh.insertMediaOrInheritanceLabel):
+ Trucate the name of inherited nodes so they don't take up as much space in the sidebar.
+
+ * UserInterface/Views/VisualStyleSelectorSection.css:
+ (.details-section.visual-style-selector-section > .header > .current-selector): Deleted.
+ (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > .titles): Deleted.
+ Removed since they are already inherited.
+
+2016-08-15 Devin Rousso <[email protected]>
+
Web Inspector: Close button on selected item in Network tab is misaligned
https://bugs.webkit.org/show_bug.cgi?id=160884
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js (204495 => 204496)
--- trunk/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js 2016-08-16 04:17:36 UTC (rev 204495)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js 2016-08-16 05:14:17 UTC (rev 204496)
@@ -87,11 +87,13 @@
return link;
};
-WebInspector.linkifyNodeReference = function(node)
+WebInspector.linkifyNodeReference = function(node, maxLength)
{
- var displayName = WebInspector.displayNameForNode(node);
+ let displayName = WebInspector.displayNameForNode(node);
+ if (!isNaN(maxLength))
+ displayName = displayName.truncate(maxLength);
- var link = document.createElement("span");
+ let link = document.createElement("span");
link.append(displayName);
link.setAttribute("role", "link");
link.className = "node-link";
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css (204495 => 204496)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2016-08-16 04:17:36 UTC (rev 204495)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2016-08-16 05:14:17 UTC (rev 204496)
@@ -125,7 +125,7 @@
.sidebar > .panel.details.css-style > .content ~ .class-list-container {
flex-wrap: wrap;
bottom: var(--console-prompt-min-height);
- max-height: 65px;
+ max-height: 75px;
padding: 3px 2px;
overflow-y: scroll;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js (204495 => 204496)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2016-08-16 04:17:36 UTC (rev 204495)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2016-08-16 05:14:17 UTC (rev 204496)
@@ -180,7 +180,7 @@
var inheritedLabel = document.createElement("div");
inheritedLabel.className = "label";
inheritedLabel.appendChild(prefixElement);
- inheritedLabel.appendChild(WebInspector.linkifyNodeReference(style.node));
+ inheritedLabel.appendChild(WebInspector.linkifyNodeReference(style.node, 100));
newDOMFragment.appendChild(inheritedLabel);
hasMediaOrInherited.push(inheritedLabel);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css (204495 => 204496)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css 2016-08-16 04:17:36 UTC (rev 204495)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css 2016-08-16 05:14:17 UTC (rev 204496)
@@ -42,9 +42,6 @@
width: calc(100% - 95px);
margin-left: 10px;
font-weight: normal;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
}
.visual-style-selector-section.details-section:not(.collapsed) > .header > .current-selector {
@@ -114,12 +111,6 @@
display: none;
}
-.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > .titles {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider ~ .visual-style-selector-item:nth-child(even) {
background-color: hsl(0, 100%, 100%);
}
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
