Update Web Platform Docs

src/extensions/default/WebPlatformDocs/InlineDocsViewer.html

@@ -10,7 +10,7 @@ <h1>{{propName}}</h1>
         <div class="scroller" tabIndex="0"> <!-- tabIndex needed: otherwise can't be focused on open or via click -->
             <dl>
                 {{#propValues}}
-                <dt>{{value}}</dt>
+                <dt>{{{value}}}</dt>
                 <dd>{{{description}}}</dd>
                 {{/propValues}}
             </dl>

src/extensions/default/WebPlatformDocs/InlineDocsViewer.js

@@ -49,19 +49,15 @@ define(function (require, exports, module) {
 
     /**
      * @param {!string} cssPropName
-     * @param {!{SUMMARY:string, URL:string, VALUES:Array.<{TITLE:string, DESCRIPTION:string}>}} cssPropDetails
+     * @param {!{SUMMARY:string, URL:string, VALUES:?Array.<{value:string, description:string}>}} cssPropDetails
      */
     function InlineDocsViewer(cssPropName, cssPropDetails) {
         InlineWidget.call(this);
 
-        var propValues = cssPropDetails.VALUES.map(function (valueInfo) {
-            return { value: valueInfo.TITLE, description: valueInfo.DESCRIPTION };
-        });
-
         var templateVars = {
             propName    : cssPropName,
             summary     : cssPropDetails.SUMMARY,
-            propValues  : propValues,
+            propValues  : cssPropDetails.VALUES || [],
             url         : cssPropDetails.URL,
             Strings     : Strings
         };

src/extensions/default/WebPlatformDocs/README.md

@@ -0,0 +1,5 @@
+# Updating the Docs
+Use the Node script [update-wpd-docs](https://github.com/MarcelGerber/update-wpd-docs) to update the `css.json` contents:
+```
+[sudo] node update-wpd-docs --exclude-vendor-prefixed --output <bracketsRepo>/src/extensions/default/WebPlatformDocs/css.json
+```

src/extensions/default/WebPlatformDocs/WebPlatformDocs.less

@@ -57,6 +57,15 @@
     b {
         font-weight: @font-weight-semibold;
     }
+
+    table {
+        width: 100%;
+        margin-bottom: 1em;
+        th, td {
+            border: 1px solid lighten(@bc-text-thin-quiet, 20%);
+            padding: 0 .15em;
+        }
+    }
 }
 
 /* Left-hand column */
@@ -207,5 +216,11 @@ a.more-info {
             color: @dark-bc-text;
             text-shadow: 0 1px 0 @dark-bc-highlight;
         }
+
+        table {
+            th, td {
+                border-color: darken(@dark-bc-text-thin-quiet, 35%);
+            }
+        }
     }
 }

src/extensions/default/WebPlatformDocs/unittests.js

@@ -185,8 +185,8 @@ define(function (require, exports, module) {
 
                 valuesArr.forEach(function (value) {
                     values.push({
-                        TITLE: value[0] || undefined,
-                        DESCRIPTION: value[1] || undefined
+                        title: value[0] || undefined,
+                        description: value[1] || undefined
                     });
                 });