Changeset 271329 in webkit

Timestamp:

Jan 8, 2021 3:19:54 PM (19 months ago)

Author:

Patrick Angle

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.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• Localizations/en.lproj/localizedStrings.js (modified) (1 diff)
• UserInterface/Main.html (modified) (1 diff)
• UserInterface/Views/FontDetailsPanel.css (added)
• UserInterface/Views/FontDetailsPanel.js (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2021-01-08  Patrick Angle  <pangle@apple.com>
+
+        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  <pangle@apple.com>
 

trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@ -25 +25 @@
 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";

trunk/Source/WebInspectorUI/UserInterface/Main.html

@@ -108 +108 @@
     <link rel="stylesheet" href="Views/FlexibleSpaceNavigationItem.css">
     <link rel="stylesheet" href="Views/FolderIcon.css">
+    <link rel="stylesheet" href="Views/FontDetailsPanel.css">
     <link rel="stylesheet" href="Views/FontResourceContentView.css">
     <link rel="stylesheet" href="Views/FormattedValue.css">

trunk/Source/WebInspectorUI/UserInterface/Views/FontDetailsPanel.js

@@ -161 +161 @@
         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);
         }
 
@@ -170 +170 @@
     {
         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;
     }