- Revision
- 271329
- Author
- [email protected]
- Date
- 2021-01-08 15:19:54 -0800 (Fri, 08 Jan 2021)
Log Message
Web Inspector: Font Details sidebar - Improve visibility of values by emphasizing them/de-emphasizing range information
https://bugs.webkit.org/show_bug.cgi?id=219996
Reviewed by Devin Rousso.
Create a separate element to hold secondary axis information like minimum, maxiumum, and default values to make
sure attention is drawn to the actual value.
* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Main.html:
* UserInterface/Views/FontDetailsPanel.css: Added.
(.sidebar > .panel.details.style-font > .content .details-section > .content > .group > .row.simple > .value .secondary):
* UserInterface/Views/FontDetailsPanel.js:
(WI.FontDetailsPanel.prototype._formatSimpleSingleValue):
(WI.FontDetailsPanel.prototype._formatVariationValue):
(WI.FontDetailsPanel.prototype._createVariationValueElement):
- Both _formatSimpleSingleValue and _formatVariationValue now use _createVariationValueElement when they need to
display secondary information alongside the value.
Modified Paths
Added Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (271328 => 271329)
--- trunk/Source/WebInspectorUI/ChangeLog 2021-01-08 22:57:23 UTC (rev 271328)
+++ trunk/Source/WebInspectorUI/ChangeLog 2021-01-08 23:19:54 UTC (rev 271329)
@@ -1,5 +1,26 @@
2021-01-08 Patrick Angle <[email protected]>
+ Web Inspector: Font Details sidebar - Improve visibility of values by emphasizing them/de-emphasizing range information
+ https://bugs.webkit.org/show_bug.cgi?id=219996
+
+ Reviewed by Devin Rousso.
+
+ Create a separate element to hold secondary axis information like minimum, maxiumum, and default values to make
+ sure attention is drawn to the actual value.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Main.html:
+ * UserInterface/Views/FontDetailsPanel.css: Added.
+ (.sidebar > .panel.details.style-font > .content .details-section > .content > .group > .row.simple > .value .secondary):
+ * UserInterface/Views/FontDetailsPanel.js:
+ (WI.FontDetailsPanel.prototype._formatSimpleSingleValue):
+ (WI.FontDetailsPanel.prototype._formatVariationValue):
+ (WI.FontDetailsPanel.prototype._createVariationValueElement):
+ - Both _formatSimpleSingleValue and _formatVariationValue now use _createVariationValueElement when they need to
+ display secondary information alongside the value.
+
+2021-01-08 Patrick Angle <[email protected]>
+
Web Inspector: Promote experimental "Show independent Styles sidebar" setting to "Elements" settings pane and enable by default
https://bugs.webkit.org/show_bug.cgi?id=218126
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (271328 => 271329)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2021-01-08 22:57:23 UTC (rev 271328)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2021-01-08 23:19:54 UTC (rev 271329)
@@ -24,8 +24,6 @@
localizedStrings["%.2fms"] = "%.2fms";
localizedStrings["%.2fs"] = "%.2fs";
localizedStrings["%.3fms"] = "%.3fms";
-/* A value, range, and default value for a single variation axis of a font. */
-localizedStrings["%d (Range: %d-%d, Default: %d) @ Font Details Sidebar"] = "%d (Range: %d-%d, Default: %d)";
localizedStrings["%d Error"] = "%d Error";
localizedStrings["%d Errors"] = "%d Errors";
localizedStrings["%d Errors, %d Warnings"] = "%d Errors, %d Warnings";
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (271328 => 271329)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2021-01-08 22:57:23 UTC (rev 271328)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2021-01-08 23:19:54 UTC (rev 271329)
@@ -107,6 +107,7 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
Added: trunk/Source/WebInspectorUI/UserInterface/Views/FontDetailsPanel.css (0 => 271329)
--- trunk/Source/WebInspectorUI/UserInterface/Views/FontDetailsPanel.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FontDetailsPanel.css 2021-01-08 23:19:54 UTC (rev 271329)
@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) 2020 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.
+ */
+
+.sidebar > .panel.details.style-font > .content .details-section > .content > .group > .row.simple > .value .secondary {
+ color: var(--text-color-secondary);
+ word-break: normal;
+}
\ No newline at end of file
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FontDetailsPanel.js (271328 => 271329)
--- trunk/Source/WebInspectorUI/UserInterface/Views/FontDetailsPanel.js 2021-01-08 22:57:23 UTC (rev 271328)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FontDetailsPanel.js 2021-01-08 23:19:54 UTC (rev 271329)
@@ -160,7 +160,7 @@
if (this._hasVariationValue(property, variationTag, {optional: true})) {
let axis = property.variations.get(variationTag);
- result += WI.UIString(" (Range: %d-%d, Default: %d)", " (Range: %d-%d, Default: %d) @ Font Details Sidebar", "A range and default value for a single variation axis of a font.").format(axis.minimumValue, axis.maximumValue, axis.defaultValue);
+ return this._createVariationValueElement(result, axis.minimumValue, axis.maximumValue, axis.defaultValue);
}
return result;
@@ -169,9 +169,21 @@
_formatVariationValue(variation)
{
let value = variation.value || variation.value === 0 ? variation.value : variation.defaultValue;
- return WI.UIString("%d (Range: %d-%d, Default: %d)", "%d (Range: %d-%d, Default: %d) @ Font Details Sidebar", "A value, range, and default value for a single variation axis of a font.").format(value, variation.minimumValue, variation.maximumValue, variation.defaultValue);
+ return this._createVariationValueElement(value, variation.minimumValue, variation.maximumValue, variation.defaultValue);
}
+ _createVariationValueElement(value, minimumValue, maximumValue, defaultValue)
+ {
+ let valueElement = document.createElement("div");
+ valueElement.textContent = value;
+
+ let secondaryElement = valueElement.appendChild(document.createElement("span"));
+ secondaryElement.className = "secondary";
+ secondaryElement.textContent = WI.UIString(" (Range: %d-%d, Default: %d)", " (Range: %d-%d, Default: %d) @ Font Details Sidebar", "A range and default value for a single variation axis of a font.").format(minimumValue, maximumValue, defaultValue);
+
+ return valueElement;
+ }
+
_formatSimpleFeatureValues(property, features, noMatchesResult)
{
let valueParts = property.value.match(WI.Font.SettingPattern);
