DevTools: [Documentation] Add signature section for renderer

Source/devtools/front_end/documentation/DocumentationView.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.View}
  */
 WebInspector.DocumentationView = function()
 {
     WebInspector.View.call(this);
     this.element.classList.add("documentation-view");
     this.registerRequiredCSS("documentationView.css");
 }
 
 /**
  * @param {string} url
  * @param {string} searchItem
  */
 WebInspector.DocumentationView.showDocumentationURL = function(url, searchItem)
 {
     if (!WebInspector.DocumentationView._view)
         WebInspector.DocumentationView._view = new WebInspector.DocumentationView();
     var view = WebInspector.DocumentationView._view;
+    view.element.removeChildren();
     WebInspector.inspectorView.showCloseableViewInDrawer("documentation", WebInspector.UIString("Documentation"), view);
     view.showDocumentation(url, searchItem);
 }
 
 WebInspector.DocumentationView.prototype = {
     /**
      * @param {string} url
      * @param {string} searchItem
      */
     showDocumentation: function(url, searchItem)
@@ skipping 55 matching lines @@
 }
 
 WebInspector.DocumentationView.Renderer.prototype = {
     /**
      * @return {!Element}
      */
     renderJSArticle: function()
     {
         this._createPageTitle(this._article.pageTitle, this._searchItem);
         this._createStandardizationStatus(this._article.standardizationStatus);
+        this._createSignatureSection(this._article.parameters, this._article.methods);
         this._createTextSectionWithTitle("Summary", this._article.summary);
-        this._createSignatureSection(this._article.parameters, this._article.methods);
+        this._createParametersSection(this._article.parameters);
         this._createReturnValueSection(this._article.methods);
         this._createExamplesSection(this._article.examples);
         this._createTextSectionWithTitle("Remarks", this._article.remarks);
 
         return this._element;
     },
 
     /**
      * @param {string} titleText
      * @param {string} searchItem
@@ skipping 24 matching lines @@
      */
     _createTextSectionWithTitle: function(titleText, article)
     {
         if (!article)
             return;
         var section = this._element.createChild("div", "documentation-section");
         var title = section.createChild("div", "documentation-section-title");
         title.textContent = titleText;
         var text = this._renderBlock(article);
         text.classList.add("documentation-text");
+        text.classList.add("documentation-section-content");
         section.appendChild(text);
     },
 
     /**
      * @param {!Array.<!WebInspector.JSArticle.Parameter>} parameters
      * @param {?WebInspector.JSArticle.Method} method
      */
     _createSignatureSection: function(parameters, method)
     {
+        if (!method)
+            return;
+        var section = this._element.createChild("p", "documentation-section");
+        var signature = section.createChild("div", "documentation-method-signature");

[lushnikov, 2014/09/05 15:20:44]

lets use "span" here instead of "div" and get rid of "display: inline" property
in .documentation-method-signature

[semeny, 2014/09/08 10:03:56]

Done.

+        var methodName = signature.createChild("span", "documentation-method-name");
+        methodName.textContent = this._searchItem.split(".").peekLast() + "(";
+        for (var i = 0; i < parameters.length; ++i) {
+            if (i > 0) {
+                var separator = signature.createChild("inline");

[lushnikov, 2014/09/05 15:20:44]

there's no tag "inline". You probably would like to use
signature.createTextChild(", ") instead

[apavlov, 2014/09/05 16:43:00]

Yes, I meant that the variable should be inlined

[semeny, 2014/09/08 10:03:57]

Done.

+                separator.textContent = ", ";
+            }
+            var parameterType = signature.createChild("span", "documentation-parameter-data-type-value");
+            var optional = "";
+            if (parameters[i].optional) {
+                parameterType.className = "documentation-parameter-data-type-value";

[lushnikov, 2014/09/05 15:20:44]

You've already set this className in element creationg

[semeny, 2014/09/08 10:03:57]

Done.

+                optional = "=";
+            }
+            parameterType.classList.add("documentation-color-box");

[apavlov, 2014/09/05 16:43:00]

This class can be provided during the element construction in createChild

[semeny, 2014/09/08 10:03:56]

Done.

+            parameterType.textContent = parameters[i].dataType + optional;

[lushnikov, 2014/09/05 15:20:44]

parameterType.textContent = parameters[i].dataType + (parameters[i].optional ?
"=" : "");

[semeny, 2014/09/08 10:03:56]

Done.

+        }
+        var separator = signature.createChild("inline");

[lushnikov, 2014/09/05 15:20:44]

ditto

[semeny, 2014/09/08 10:03:56]

Done.

+        separator.textContent = ") : ";

[lushnikov, 2014/09/05 15:20:44]

lets avoid space after ")"

[semeny, 2014/09/08 10:03:56]

Done.

+        var returnTypeElement = signature.createChild("span", "documentation-parameter-data-type-value");
+        returnTypeElement.classList.add("documentation-color-box");
+        returnTypeElement.textContent = method.returnValueName;
+    },
+
+    /**
+     * @param {!Array.<!WebInspector.JSArticle.Parameter>} parameters
+     */
+    _createParametersSection: function(parameters)
+    {
         if (!parameters.length)
             return;
         var section = this._element.createChild("div", "documentation-section");
         var title = section.createChild("div", "documentation-section-title");
         title.textContent = "Parameters";
         for (var i = 0; i < parameters.length; ++i) {
             var parameter = section.createChild("div", "documentation-parameter");
+            parameter.classList.add("documentation-section-content");

[apavlov, 2014/09/05 16:43:00]

Ditto

[semeny, 2014/09/08 10:03:56]

Done.

             var header = parameter.createChild("div", "documentation-parameter-header");
             var name = header.createChild("span", "documentation-parameter-name");
             name.textContent = parameters[i].name;
             var dataTypeValue = header.createChild("span", "documentation-parameter-data-type-value");
+            dataTypeValue.classList.add("documentation-color-box");

[apavlov, 2014/09/05 16:43:00]

Ditto for these two classes

[semeny, 2014/09/08 10:03:57]

Done.

+            dataTypeValue.classList.add("documentation-parameter-margin");
             dataTypeValue.textContent = parameters[i].dataType;
             if (parameters[i].optional) {
                 var optional = header.createChild("span", "documentation-parameter-optional");
+                optional.classList.add("documentation-color-box");

[apavlov, 2014/09/05 16:43:00]

Ditto for these two classes

[semeny, 2014/09/08 10:03:56]

Done.

+                optional.classList.add("documentation-parameter-margin");
                 optional.textContent = WebInspector.UIString("Optional");
             }
-            parameter.appendChild(this._renderBlock(parameters[i].description));
+            var description = this._renderBlock(parameters[i].description);
+            description.classList.add("documentation-text");
+            parameter.appendChild(description);
         }
     },
 
     /**
      * @param {?WebInspector.JSArticle.Method} method
      */
     _createReturnValueSection: function(method)
     {
         if (!method)
             return;
 
         var section = this._element.createChild("div", "documentation-section");
         var title = section.createChild("div", "documentation-section-title");
         title.textContent = "Return Value";
-        var returnValueName = section.createChild("div", "documentation-return-value");
+        var returnValueName = section.createChild("div", "documentation-section-content");
         returnValueName.textContent = WebInspector.UIString("Returns an object of type " + method.returnValueName + ".");
-        var returnValueDescription = section.createChild("div", "documentation-return-value");
+        var returnValueDescription = section.createChild("div", "documentation-section-content");
+        returnValueDescription.classList.add("documentation-text");

[apavlov, 2014/09/05 16:43:00]

Ditto

[semeny, 2014/09/08 10:03:56]

Done.

         returnValueDescription.textContent = WebInspector.UIString(method.returnValueDescription);
     },
 
     /**
      * @param {!Array.<!WebInspector.JSArticle.Example>} examples
      */
     _createExamplesSection: function(examples)
     {
         if (!examples.length)
             return;
 
         var section = this._element.createChild("div", "documentation-section");
         var title = section.createChild("div", "documentation-section-title");
         title.textContent = "Examples";
 
         for (var i = 0; i < examples.length; ++i) {
             var example = section.createChild("div", "documentation-example");
+            example.classList.add("documentation-section-content");

[apavlov, 2014/09/05 16:43:00]

Ditto here and below

[semeny, 2014/09/08 10:03:56]

Done.

             var exampleDescription = example.createChild("div", "documentation-example-description-section");
             if (examples[i].liveUrl) {
                 var liveUrl = exampleDescription.createChild("a", "documentation-example-link");
+                liveUrl.classList.add("documentation-color-box");
                 liveUrl.href = examples[i].liveUrl;
                 liveUrl.textContent = WebInspector.UIString("Example");
             }
-            exampleDescription.appendChild(this._renderBlock(examples[i].description));
+            var description = this._renderBlock(examples[i].description);
+            description.classList.add("documentation-text");
+            exampleDescription.appendChild(description);
             var code = example.createChild("div", "documentation-example-code");
             code.classList.add("source-code");
             code.textContent = examples[i].code;
         }
     },
 
     /**
      * @param {!WebInspector.WikiParser.ArticleElement} article
      * @return {!Element}
      */
@@ skipping 62 matching lines @@
     appendApplicableItems: function(event, contextMenu, target)
     {
         if (!(target instanceof WebInspector.CodeMirrorTextEditor))
             return;
         var textEditor = /** @type {!WebInspector.CodeMirrorTextEditor} */ (target);
         var descriptors = this._determineDescriptors(textEditor);
         if (!descriptors.length)
             return;
         if (descriptors.length === 1) {
             var formatString = WebInspector.useLowerCaseMenuTitles() ? "Show documentation for %s.%s" : "Show Documentation for %s.%s";
-            contextMenu.appendItem(WebInspector.UIString(formatString, descriptors[0].name(), descriptors[0].searchItem()), WebInspector.DocumentationView.showDocumentationURL.bind(null, descriptors[0].url(), descriptors[0].searchItem()));
+            var methodName = String.sprintf("%s.%s", descriptors[0].name(), descriptors[0].searchItem());
+            contextMenu.appendItem(WebInspector.UIString(formatString, descriptors[0].name(), descriptors[0].searchItem()), WebInspector.DocumentationView.showDocumentationURL.bind(null, descriptors[0].url(), methodName));
             return;
         }
         var subMenuItem = contextMenu.appendSubMenuItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Show documentation for..." : "Show Documentation for..."));
-        for (var i = 0; i < descriptors.length; ++i)
-            subMenuItem.appendItem(String.sprintf("%s.%s", descriptors[i].name(), descriptors[i].searchItem()), WebInspector.DocumentationView.showDocumentationURL.bind(null, descriptors[i].url(), descriptors[i].searchItem()));
+        for (var i = 0; i < descriptors.length; ++i) {
+            var methodName = String.sprintf("%s.%s", descriptors[i].name(), descriptors[i].searchItem());
+            subMenuItem.appendItem(methodName, WebInspector.DocumentationView.showDocumentationURL.bind(null, descriptors[i].url(), methodName));
+        }
     },
 
     /**
      * @param {!WebInspector.CodeMirrorTextEditor} textEditor
      * @return {!Array.<!WebInspector.DocumentationURLProvider.ItemDescriptor>}
      */
     _determineDescriptors: function(textEditor)
     {
         var urlProvider = WebInspector.DocumentationURLProvider.instance();
         var textSelection = textEditor.selection().normalize();
@@ skipping 16 matching lines @@
          */
         function computeDescriptors(column)
         {
             var token = textEditor.tokenAtTextPosition(textSelection.startLine, column);
             if (!token)
                 return [];
             var tokenText = textEditor.line(textSelection.startLine).substring(token.startColumn, token.endColumn);
             return urlProvider.itemDescriptors(tokenText);
         }
     }
-}
+}