Title: [195819] trunk/Source/WebInspectorUI
Revision
195819
Author
[email protected]
Date
2016-01-29 10:00:06 -0800 (Fri, 29 Jan 2016)

Log Message

Web Inspector: Add font-variant-* to the visual styles sidebar
https://bugs.webkit.org/show_bug.cgi?id=148720
<rdar://problem/22569974>

Patch by Devin Rousso <[email protected]> on 2016-01-29
Reviewed by Timothy Hatcher.

Added another subsection to the "Text" section for font-variant-*
properties.

* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Images/FontVariantSmallCaps.svg: Removed.

* UserInterface/Views/VisualStyleDetailsPanel.js:
(WebInspector.VisualStyleDetailsPanel):
Added another keyword grouping with the "normal" value since it is used
frequently in multiple subsections.

(WebInspector.VisualStyleDetailsPanel.prototype._populateFontSection):
(WebInspector.VisualStyleDetailsPanel.prototype._populateFontVariantsSection):
Added the five new font-variant-* properties specified in
<https://webkit.org/blog/5735/css-font-features/>.

(WebInspector.VisualStyleDetailsPanel.prototype._populateTextSpacingSection):
(WebInspector.VisualStyleDetailsPanel.prototype._populateAnimationSection):
Replaced the hardcoded "normal" keyword with the new grouping.

* UserInterface/Views/VisualStyleKeywordCheckbox.css:
(.visual-style-property-container.keyword-checkbox.font-variant > .visual-style-property-value-container > input::after): Deleted.

Modified Paths

Removed Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (195818 => 195819)


--- trunk/Source/WebInspectorUI/ChangeLog	2016-01-29 17:50:48 UTC (rev 195818)
+++ trunk/Source/WebInspectorUI/ChangeLog	2016-01-29 18:00:06 UTC (rev 195819)
@@ -1,3 +1,34 @@
+2016-01-29  Devin Rousso  <[email protected]>
+
+        Web Inspector: Add font-variant-* to the visual styles sidebar
+        https://bugs.webkit.org/show_bug.cgi?id=148720
+        <rdar://problem/22569974>
+
+        Reviewed by Timothy Hatcher.
+
+        Added another subsection to the "Text" section for font-variant-*
+        properties.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Images/FontVariantSmallCaps.svg: Removed.
+
+        * UserInterface/Views/VisualStyleDetailsPanel.js:
+        (WebInspector.VisualStyleDetailsPanel):
+        Added another keyword grouping with the "normal" value since it is used
+        frequently in multiple subsections.
+
+        (WebInspector.VisualStyleDetailsPanel.prototype._populateFontSection):
+        (WebInspector.VisualStyleDetailsPanel.prototype._populateFontVariantsSection):
+        Added the five new font-variant-* properties specified in
+        <https://webkit.org/blog/5735/css-font-features/>.
+
+        (WebInspector.VisualStyleDetailsPanel.prototype._populateTextSpacingSection):
+        (WebInspector.VisualStyleDetailsPanel.prototype._populateAnimationSection):
+        Replaced the hardcoded "normal" keyword with the new grouping.
+
+        * UserInterface/Views/VisualStyleKeywordCheckbox.css:
+        (.visual-style-property-container.keyword-checkbox.font-variant > .visual-style-property-value-container > input::after): Deleted.
+
 2016-01-28  Joseph Pecoraro  <[email protected]>
 
         Web Inspector: Avoid recreating Timeline's DataGridNode data multiple times

Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (195818 => 195819)


--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js	2016-01-29 17:50:48 UTC (rev 195818)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js	2016-01-29 18:00:06 UTC (rev 195819)
@@ -1,6 +1,5 @@
 \xFE\xFFvar localizedStrings = new Object;
 
-localizedStrings["%d More\u2026"] = "%d More\u2026";
 localizedStrings[" (Prototype)"] = " (Prototype)";
 localizedStrings[" (line %s)"] = " (line %s)";
 localizedStrings["%.0f B"] = "%.0f B";
@@ -19,6 +18,7 @@
 localizedStrings["%.3fms"] = "%.3fms";
 localizedStrings["%d Errors"] = "%d Errors";
 localizedStrings["%d Errors, %d Warnings"] = "%d Errors, %d Warnings";
+localizedStrings["%d More\u2026"] = "%d More\u2026";
 localizedStrings["%d Warnings"] = "%d Warnings";
 localizedStrings["%d \u2A09 %d"] = "%d \u2A09 %d";
 localizedStrings["%d \xd7 %d pixels"] = "%d \xd7 %d pixels";
@@ -67,6 +67,7 @@
 localizedStrings["All Resources"] = "All Resources";
 localizedStrings["All Storage"] = "All Storage";
 localizedStrings["All Uncaught Exceptions"] = "All Uncaught Exceptions";
+localizedStrings["Alternates"] = "Alternates";
 localizedStrings["An error occurred trying to load the resource."] = "An error occurred trying to load the resource.";
 localizedStrings["An error occurred trying to read the  %s  table."] = "An error occurred trying to read the  %s  table.";
 localizedStrings["An unexpected error %s occurred."] = "An unexpected error %s occurred.";
@@ -112,6 +113,7 @@
 localizedStrings["Call Stack"] = "Call Stack";
 localizedStrings["Calls"] = "Calls";
 localizedStrings["Cancel Automatic Continue"] = "Cancel Automatic Continue";
+localizedStrings["Caps"] = "Caps";
 localizedStrings["Capturing"] = "Capturing";
 localizedStrings["Catch Variables"] = "Catch Variables";
 localizedStrings["Character Data"] = "Character Data";
@@ -270,6 +272,8 @@
 localizedStrings["Encoding"] = "Encoding";
 localizedStrings["End Capturing"] = "End Capturing";
 localizedStrings["Enter Class Name"] = "Enter Class Name";
+localizedStrings["Enter Tag"] = "Enter Tag";
+localizedStrings["Enter Value"] = "Enter Value";
 localizedStrings["Enter a Gradient"] = "Enter a Gradient";
 localizedStrings["Enter a URL"] = "Enter a URL";
 localizedStrings["Enter a name."] = "Enter a name.";
@@ -289,6 +293,7 @@
 localizedStrings["Extension Scripts"] = "Extension Scripts";
 localizedStrings["Extra Scripts"] = "Extra Scripts";
 localizedStrings["Family"] = "Family";
+localizedStrings["Features"] = "Features";
 localizedStrings["Filename"] = "Filename";
 localizedStrings["Fill"] = "Fill";
 localizedStrings["Fill Mode"] = "Fill Mode";
@@ -389,6 +394,7 @@
 localizedStrings["Layout Invalidated"] = "Layout Invalidated";
 localizedStrings["Left"] = "Left";
 localizedStrings["Letter"] = "Letter";
+localizedStrings["Ligatures"] = "Ligatures";
 localizedStrings["Line %d"] = "Line %d";
 localizedStrings["Line %d:%d"] = "Line %d:%d";
 localizedStrings["Line Number"] = "Line Number";
@@ -456,6 +462,7 @@
 localizedStrings["Node"] = "Node";
 localizedStrings["Not found"] = "Not found";
 localizedStrings["Number"] = "Number";
+localizedStrings["Numeric"] = "Numeric";
 localizedStrings["Offset"] = "Offset";
 localizedStrings["Online"] = "Online";
 localizedStrings["Opacity"] = "Opacity";
@@ -676,7 +683,7 @@
 localizedStrings["Using Keyword Value"] = "Using Keyword Value";
 localizedStrings["Using the previous selector '%s'."] = "Using the previous selector '%s'.";
 localizedStrings["Value"] = "Value";
-localizedStrings["Variant"] = "Variant";
+localizedStrings["Variants"] = "Variants";
 localizedStrings["Vertical"] = "Vertical";
 localizedStrings["Visibility"] = "Visibility";
 localizedStrings["Warning: "] = "Warning: ";

Deleted: trunk/Source/WebInspectorUI/UserInterface/Images/FontVariantSmallCaps.svg (195818 => 195819)


--- trunk/Source/WebInspectorUI/UserInterface/Images/FontVariantSmallCaps.svg	2016-01-29 17:50:48 UTC (rev 195818)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/FontVariantSmallCaps.svg	2016-01-29 18:00:06 UTC (rev 195819)
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
-    <path fill="currentColor" d="M 4.44335938 8.06054688 L 3.35449219 4.89160156 L 2.19726562 8.06054688 L 4.44335938 8.06054688 Z M 2.84667969 3.82714844 L 3.9453125 3.82714844 L 6.54785156 11 L 5.48339844 11 L 4.75585938 8.8515625 L 1.91894531 8.8515625 L 1.14257812 11 L 0.146484375 11 L 2.84667969 3.82714844 Z M 7.01611328 5.97900391 L 9.17285156 5.97900391 C 9.76074513 5.97900391 10.1788725 6.15445788 10.4272461 6.50537109 C 10.5730802 6.7127289 10.6459961 6.95198432 10.6459961 7.22314453 C 10.6459961 7.53987789 10.5559905 7.79964091 10.3759766 8.00244141 C 10.2825516 8.1095383 10.1481129 8.20751909 9.97265625 8.29638672 C 10.2301445 8.39436898 10.4226882 8.5048822 10.550293 8.62792969 C 10.77588 8.84668078 10.8886719 9.14859833 10.8886719 9.53369141 C 10.8886719 9.85726073 10.7872731 10.1500638 10.5844727 10.4121094 C 10.2814112 10.8040384 9.79948247 11 9.13867188 11 L 7.01611328 11 L 7.01611328 5.97900391 Z M 8.91992188 8.1015625 C 9.20703269 8.101562
 5 9.43033774 8.0616866 9.58984375 7.98193359 C 9.84049604 7.85660745 9.96582031 7.63102376 9.96582031 7.30517578 C 9.96582031 6.97704914 9.83252086 6.75602271 9.56591797 6.64208984 C 9.41552659 6.57828744 9.19222153 6.54638672 8.89599609 6.54638672 L 7.68261719 6.54638672 L 7.68261719 8.1015625 L 8.91992188 8.1015625 Z M 9.14892578 10.4189453 C 9.56592005 10.4189453 9.86328036 10.2981783 10.0410156 10.0566406 C 10.1526698 9.90397059 10.2084961 9.71940212 10.2084961 9.50292969 C 10.2084961 9.13834453 10.0455745 8.88997462 9.71972656 8.7578125 C 9.54654861 8.68717413 9.317547 8.65185547 9.03271484 8.65185547 L 7.68261719 8.65185547 L 7.68261719 10.4189453 L 9.14892578 10.4189453 Z M 15.1289062 6.34472656 C 15.4798195 6.67968917 15.6746417 7.06021922 15.7133789 7.48632812 L 15.050293 7.48632812 C 14.9750973 7.1627588 14.8252778 6.90641371 14.6008301 6.71728516 C 14.3763823 6.52815661 14.0613627 6.43359375 13.6557617 6.43359375 C 13.1612931 6.43359375 12.7619644 6.60733876 12.45
 77637 6.95483398 C 12.1535629 7.30232921 12.0014648 7.83495735 12.0014648 8.55273438 C 12.0014648 9.14062794 12.1387519 9.61742981 12.4133301 9.9831543 C 12.6879083 10.3488788 13.0974908 10.5317383 13.6420898 10.5317383 C 14.1433944 10.5317383 14.5250638 10.3391946 14.7871094 9.95410156 C 14.9261075 9.75130107 15.0297848 9.48470217 15.0981445 9.15429688 L 15.7612305 9.15429688 C 15.7019854 9.68294535 15.5060238 10.1261375 15.1733398 10.4838867 C 14.7745748 10.9145529 14.2368198 11.1298828 13.5600586 11.1298828 C 12.9767223 11.1298828 12.4868184 10.9532895 12.090332 10.6000977 C 11.5685195 10.1329729 11.3076172 9.41178873 11.3076172 8.43652344 C 11.3076172 7.69595984 11.5035788 7.0887068 11.8955078 6.61474609 C 12.3193381 6.09976956 12.9038049 5.84228516 13.6489258 5.84228516 C 14.2846711 5.84228516 14.777993 6.00976395 15.1289062 6.34472656 Z"/>
-</svg>

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js (195818 => 195819)


--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js	2016-01-29 17:50:48 UTC (rev 195818)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js	2016-01-29 18:00:06 UTC (rev 195819)
@@ -38,6 +38,7 @@
 
         // These keywords, as well as the values below, are not localized as they must match the CSS spec.
         this._keywords.defaults = ["Inherit", "Initial", "Unset", "Revert"];
+        this._keywords.normal = this._keywords.defaults.concat(["Normal"]);
         this._keywords.boxModel = this._keywords.defaults.concat(["Auto"]);
         this._keywords.borderStyle = {
             basic: this._keywords.defaults.concat(["None", "Hidden", "Solid"]),
@@ -76,10 +77,11 @@
         this._generateSection("content", WebInspector.UIString("Content"));
         this._generateSection("text-style", WebInspector.UIString("Style"));
         this._generateSection("font", WebInspector.UIString("Font"));
+        this._generateSection("font-variants", WebInspector.UIString("Variants"));
         this._generateSection("text-spacing", WebInspector.UIString("Spacing"));
         this._generateSection("text-shadow", WebInspector.UIString("Shadow"));
 
-        this._sections.text = new WebInspector.DetailsSection("text", WebInspector.UIString("Text"), [this._groups.content.section, this._groups.textStyle.section, this._groups.font.section, this._groups.textSpacing.section, this._groups.textShadow.section]);
+        this._sections.text = new WebInspector.DetailsSection("text", WebInspector.UIString("Text"), [this._groups.content.section, this._groups.textStyle.section, this._groups.font.section, this._groups.fontVariants.section, this._groups.textSpacing.section, this._groups.textShadow.section]);
         this.element.appendChild(this._sections.text.element);
 
         // Background Section
@@ -705,10 +707,10 @@
         let fontStyleRow = new WebInspector.DetailsSectionRow;
 
         properties.fontStyle = new WebInspector.VisualStyleKeywordIconList("font-style", WebInspector.UIString("Style"), ["Italic", "Normal"]);
-        properties.fontVariant = new WebInspector.VisualStyleKeywordCheckbox("font-variant", WebInspector.UIString("Variant"), "Small Caps")
+        properties.fontFeatureSettings = new WebInspector.VisualStyleBasicInput("font-feature-settings", WebInspector.UIString("Features"), WebInspector.UIString("Enter Tag"));
 
         fontStyleRow.element.appendChild(properties.fontStyle.element);
-        fontStyleRow.element.appendChild(properties.fontVariant.element);
+        fontStyleRow.element.appendChild(properties.fontFeatureSettings.element);
 
         group.autocompleteCompatibleProperties = [properties.fontFamily];
 
@@ -716,16 +718,50 @@
         this._populateSection(group, [fontGroup]);
     }
 
+    _populateFontVariantsSection()
+    {
+        let group = this._groups.fontVariants;
+        let properties = group.properties;
+
+        let alternatesRow = new WebInspector.DetailsSectionRow;
+
+        properties.fontVariantAlternates = new WebInspector.VisualStyleBasicInput("font-variant-alternates", WebInspector.UIString("Alternates"), WebInspector.UIString("Enter Value"));
+
+        alternatesRow.element.appendChild(properties.fontVariantAlternates.element);
+
+        let positionRow = new WebInspector.DetailsSectionRow;
+
+        properties.fontVariantPosition = new WebInspector.VisualStyleKeywordPicker("font-variant-position", WebInspector.UIString("Position"), this._keywords.normal.concat(["Sub", "Super"]));
+
+        positionRow.element.appendChild(properties.fontVariantPosition.element);
+
+        properties.fontVariantCaps = new WebInspector.VisualStyleKeywordPicker("font-variant-caps", WebInspector.UIString("Caps"), this._keywords.normal.concat(["None", "Small Caps", "All Small Caps", "Petite Caps", "All Petite Caps", "Unicase", "Titling Caps"]));
+
+        positionRow.element.appendChild(properties.fontVariantCaps.element);
+
+        let ligaturesRow = new WebInspector.DetailsSectionRow;
+
+        // FIXME <http://webkit.org/b/153645> Add token based editor for Visual Sidebar
+        properties.fontVariantLigatures = new WebInspector.VisualStyleKeywordPicker("font-variant-ligatures", WebInspector.UIString("Ligatures"), this._keywords.normal.concat(["None", "Common Ligatures", "No Common Ligatures", "Discretionary Ligatures", "No Discretionary Ligatures", "Historical Ligatures", "No Historical Ligatures", "Contextual", "No Contextual"]));
+
+        ligaturesRow.element.appendChild(properties.fontVariantLigatures.element);
+
+        properties.fontVariantNumeric = new WebInspector.VisualStyleKeywordPicker("font-variant-numeric", WebInspector.UIString("Numeric"), this._keywords.normal.concat(["None", "Ordinal", "Slashed Zero", "Lining Nums", "Oldstyle Nums", "Proportional Nums", "Tabular Nums", "Diagonal Fractions", "Stacked Fractions"]));
+
+        ligaturesRow.element.appendChild(properties.fontVariantNumeric.element);
+
+        let variantsGroup = new WebInspector.DetailsSectionGroup([alternatesRow, positionRow, ligaturesRow]);
+        this._populateSection(group, [variantsGroup]);
+    }
+
     _populateTextSpacingSection()
     {
         let group = this._groups.textSpacing;
         let properties = group.properties;
 
-        let defaultTextKeywords = this._keywords.defaults.concat(["Normal"]);
-
         let textLayoutRow = new WebInspector.DetailsSectionRow;
 
-        properties.lineHeight = new WebInspector.VisualStyleNumberInputBox("line-height", WebInspector.UIString("Height"), defaultTextKeywords, this._units.defaults);
+        properties.lineHeight = new WebInspector.VisualStyleNumberInputBox("line-height", WebInspector.UIString("Height"), this._keywords.normal, this._units.defaults);
         properties.verticalAlign = new WebInspector.VisualStyleNumberInputBox("vertical-align", WebInspector.UIString("Align"), ["Baseline", "Bottom"].concat(this._keywords.defaults, ["Middle", "Sub", "Super", "Text Bottom", "Text Top", "Top"]), this._units.defaults);
 
         textLayoutRow.element.appendChild(properties.lineHeight.element);
@@ -733,8 +769,8 @@
 
         let textSpacingRow = new WebInspector.DetailsSectionRow;
 
-        properties.letterSpacing = new WebInspector.VisualStyleNumberInputBox("letter-spacing", WebInspector.UIString("Letter"), defaultTextKeywords, this._units.defaults);
-        properties.wordSpacing = new WebInspector.VisualStyleNumberInputBox("word-spacing", WebInspector.UIString("Word"), defaultTextKeywords, this._units.defaults);
+        properties.letterSpacing = new WebInspector.VisualStyleNumberInputBox("letter-spacing", WebInspector.UIString("Letter"), this._keywords.normal, this._units.defaults);
+        properties.wordSpacing = new WebInspector.VisualStyleNumberInputBox("word-spacing", WebInspector.UIString("Word"), this._keywords.normal, this._units.defaults);
 
         textSpacingRow.element.appendChild(properties.letterSpacing.element);
         textSpacingRow.element.appendChild(properties.wordSpacing.element);
@@ -1273,7 +1309,7 @@
         let animationDirectionRow = new WebInspector.DetailsSectionRow;
 
         properties.animationDirection = new WebInspector.VisualStyleKeywordPicker("animation-direction", WebInspector.UIString("Direction"), {
-            basic: this._keywords.defaults.concat(["Normal", "Reverse"]),
+            basic: this._keywords.normal.concat(["Reverse"]),
             advanced: ["Alternate", "Alternate Reverse"]
         });
         properties.animationFillMode = new WebInspector.VisualStyleKeywordPicker("animation-fill-mode", WebInspector.UIString("Fill Mode"), this._keywords.defaults.concat(["None", "Forwards", "Backwards", "Both"]));

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.css (195818 => 195819)


--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.css	2016-01-29 17:50:48 UTC (rev 195818)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.css	2016-01-29 18:00:06 UTC (rev 195819)
@@ -31,14 +31,3 @@
 .visual-style-property-container.keyword-checkbox > .visual-style-property-value-container > input {
     width: auto;
 }
-
-/* Font Variant */
-.visual-style-property-container.keyword-checkbox.font-variant > .visual-style-property-value-container > input::after {
-    position: absolute;
-    top: 5px;
-    left: 15px;
-    font-size: 9px;
-    font-variant: small-caps;
-    word-spacing: -2px;
-    content: "Small Caps";
-}
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to