Scrapped QuickDocs data for css and html from MDN to css.json and html.json

src/extensions/default/WebPlatformDocs/InlineDocsViewer.html → src/extensions/default/MDNDocs/InlineDocsViewer.html

@@ -1,4 +1,4 @@
-<div class="css-prop-defn" tabIndex="0"> <!-- tabIndex needed: otherwise click focuses CodeMirror scroller and Esc won't work -->
+<div class="css-prop-defn {{#fullscreenSummary}}fullscreen-summary{{/fullscreenSummary}}" tabIndex="0"> <!-- tabIndex needed: otherwise click focuses CodeMirror scroller and Esc won't work -->
     <div class="css-prop-summary">
         <h1>{{propName}}</h1>
         <div>{{{summary}}}</div>

src/extensions/default/WebPlatformDocs/InlineDocsViewer.js → src/extensions/default/MDNDocs/InlineDocsViewer.js

@@ -22,7 +22,7 @@
  */
 
 /**
- * Inline widget to display WebPlatformDocs JSON data nicely formatted
+ * Inline widget to display MDNDocs JSON data nicely formatted
  */
 define(function (require, exports, module) {
     'use strict';
@@ -42,22 +42,23 @@ define(function (require, exports, module) {
     var SCROLL_LINE_HEIGHT = 40;
 
     // Load CSS
-    ExtensionUtils.loadStyleSheet(module, "WebPlatformDocs.less");
+    ExtensionUtils.loadStyleSheet(module, "MDNDocs.less");
 
 
     /**
      * @param {!string} cssPropName
      * @param {!{SUMMARY:string, URL:string, VALUES:?Array.<{value:string, description:string}>}} cssPropDetails
      */
-    function InlineDocsViewer(cssPropName, cssPropDetails) {
+    function InlineDocsViewer(PropName, PropDetails) {
         InlineWidget.call(this);
 
         var templateVars = {
-            propName    : cssPropName,
-            summary     : cssPropDetails.SUMMARY,
-            propValues  : cssPropDetails.VALUES || [],
-            url         : cssPropDetails.URL,
-            Strings     : Strings
+            propName            : PropName,
+            summary             : PropDetails.SUMMARY,
+            fullscreenSummary   : !(PropDetails.VALUES && PropDetails.VALUES.length),
+            propValues          : PropDetails.VALUES || [],
+            url                 : PropDetails.URL,
+            Strings             : Strings
         };
 
         var html = Mustache.render(inlineEditorTemplate, templateVars);

src/extensions/default/WebPlatformDocs/WebPlatformDocs.less → src/extensions/default/MDNDocs/MDNDocs.less

@@ -144,6 +144,16 @@
     }
 }
 
+.fullscreen-summary {
+    .css-prop-summary {
+        width: 95%;
+    }
+
+    .css-prop-values, .divider-holder {
+        display: none;
+    }
+}
+
 .content-bottom {
     // Used to pull bottom edge of .css-prop-defn down below its two floated children.
     // Also prevents .more-info (after us in DOM order) from overlapping the float: right content.

src/extensions/default/MDNDocs/README.md

@@ -0,0 +1,3 @@
+# Updating the Docs
+* Use the Node script [scrape-mdn](https://github.com/mozilla/brackets/tree/master/src/extensions/extra/MDNDocs/tools/scrape-mdn) to update the `css.json` and `html.json` contents:
+* Both the JSON files will have URL and Summary, but for css.json we need to have possible values of each css property along with small description, so use this Node script [MDNDocsScrapper](https://github.com/saurabh95/MDNDocsScrapper), this takes css.json as input and then creates a newcss.json with the desired content.