Improve readability for events & methods nested into types

- add name of parent type to headers of event and methods sections
- increase bottom margins for top-level apiItem to 2em
- set h3 font size for nested sections to 110% (same as parent, was 120%)
- don't display parameters for methods with no parameters

BUG=none
TEST=none
Review URL: http://codereview.chromium.org/6476032


git-svn-id: svn://svn.chromium.org/chrome/trunk/src@74457 0039d316-1c4b-4281-b951-d872f2087c98

7 files changed, 30 insertions, 60 deletions

diff --git a/chrome/common/extensions/docs/css/ApiRefStyles.css b/chrome/common/extensions/docs/css/ApiRefStyles.css
index 5759b38..3a7040f 100644
--- a/chrome/common/extensions/docs/css/ApiRefStyles.css
+++ b/chrome/common/extensions/docs/css/ApiRefStyles.css
@@ -135,16 +135,6 @@ h4 {
   font-size:110%
 }
 
-#gc-pagecontent h1 {
-  font-size:130%;
-  font-weight:bold;
-  margin:2em 0 0 -10px;
-  padding:1px 3px;
-  position:relative;
-  border-top:1px solid #36C;
-  background-color:#e5ecf9
-}
-
 .labs #gc-pagecontent h1 {
   background-color:#dcf6db;
   border-top:1px solid #090
@@ -155,39 +145,6 @@ h4 {
   border-top:1px solid #333
 }
 
-#gc-pagecontent h2 {
-  font-size:130%;
-  font-weight:bold;
-  margin:1.5em 0 0 0
-}
-
-#gc-pagecontent h3 {
-  font-size:110%;
-  margin:.7em 0 0 0;
-  position:relative;
-  top:.4em
-}
-
-#gc-pagecontent h4 {
-  font-size:100%;
-  font-weight:bold;
-  margin:.6em 0 0 0;
-  position:relative;
-  top:.4em;
-  z-index:5
-}
-
-#gc-pagecontent h5 {
-  font-size:100%;
-  font-weight:normal;
-  font-style:italic;
-  text-decoration:underline;
-  margin:.4em 0 0 0;
-  position:relative;
-  top:.4em;
-  z-index:5
-}
-
 /* This next set of rules for headings comes from the Codesite "semantic_headers.css" file. */
 
 #gc-pagecontent h1 {
@@ -257,6 +214,11 @@ h4 {
   background:none
 }
 
+#gc-pagecontent .apiItem h3 {
+  margin-top: 1em;
+  font-size:110%;
+}
+
 ol,ul {
   padding:0;
   margin:.5em 0 0 15px;
@@ -1282,7 +1244,8 @@ div.summary .subdued {
 .apiGroup div.summary {
   border: 1px solid rgb(147, 180, 217);
   font-family: "Courier New", courier, monospace;
-  padding: 0.5em;
+  padding: 0.5em 0.5em 0.5em 2em;
+  text-indent: -1.5em;
   background-color: rgb(202, 222, 244);
   margin-top: 1em;
 }
@@ -1317,6 +1280,14 @@ p#classSummary {
 .apiItem {
 }
 
+.apiGroup .apiItem {
+  margin-bottom: 2em;
+}
+
+.apiItem .apiItem {
+  margin-bottom: 0px;
+}
+
 div.note {
   background-color: rgb(202, 222, 244);
   border: 1px solid rgb(147, 180, 217);
@@ -1376,4 +1347,3 @@ table.noborders td {
   margin: 1.3em 1em 0 0;
   padding: 0;
 }
-
diff --git a/chrome/common/extensions/docs/experimental.tts.html b/chrome/common/extensions/docs/experimental.tts.html
index 456b989..413fc3d 100644
--- a/chrome/common/extensions/docs/experimental.tts.html
+++ b/chrome/common/extensions/docs/experimental.tts.html
@@ -1534,7 +1534,7 @@ dynamically decide whether to handle it or not.</p>
                 <p>Stop any current speech.</p>
 
                 <!-- PARAMETERS -->
-                <h4>Parameters</h4>
+                <h4 style="display: none; ">Parameters</h4>
                 <dl>
                   <div style="display: none; ">
                     <div>
diff --git a/chrome/common/extensions/docs/experimental.webInspector.audits.html b/chrome/common/extensions/docs/experimental.webInspector.audits.html
index 15cb712..2520d1c 100644
--- a/chrome/common/extensions/docs/experimental.webInspector.audits.html
+++ b/chrome/common/extensions/docs/experimental.webInspector.audits.html
@@ -726,7 +726,7 @@
           <dd>
             <div class="apiGroup" style="">
             <a name="global-AuditCategory-events"></a>
-            <h3>Events</h3>
+            <h3>Events of AuditCategory</h3>
             <!-- iterates over all events -->
             <div class="apiItem">
               <a name="event-AuditCategory-onAuditStarted"></a>
@@ -1243,7 +1243,7 @@
           <dd>
             <div class="apiGroup">
             <a name="global-AuditResults-methods"></a>
-            <h3>Methods</h3>
+            <h3>Methods of AuditResults</h3>
 
             <!-- iterates over all functions -->
             <div class="apiItem">
@@ -1860,7 +1860,7 @@
                 <p>Signals the WebInspector Audits panel that the run of this category is over. Normally the run completes automatically when a number of added top-level results is equal to that declared when AuditCategory was created.</p>
 
                 <!-- PARAMETERS -->
-                <h4>Parameters</h4>
+                <h4 style="display: none; ">Parameters</h4>
                 <dl>
                   <div style="display: none; ">
                     <div>
@@ -2712,7 +2712,7 @@
           <dd>
             <div class="apiGroup">
             <a name="global-AuditResultNode-methods"></a>
-            <h3>Methods</h3>
+            <h3>Methods of AuditResultNode</h3>
 
             <!-- iterates over all functions -->
             <div class="apiItem">
diff --git a/chrome/common/extensions/docs/experimental.webInspector.panels.html b/chrome/common/extensions/docs/experimental.webInspector.panels.html
index f0048b0..29a1295 100644
--- a/chrome/common/extensions/docs/experimental.webInspector.panels.html
+++ b/chrome/common/extensions/docs/experimental.webInspector.panels.html
@@ -853,7 +853,7 @@
           <dd>
             <div class="apiGroup">
             <a name="global-PanelWithSidebars-methods"></a>
-            <h3>Methods</h3>
+            <h3>Methods of PanelWithSidebars</h3>
 
             <!-- iterates over all functions -->
             <div class="apiItem">
@@ -1662,7 +1662,7 @@
           <dd>
             <div class="apiGroup" style="">
             <a name="global-ElementsPanel-events"></a>
-            <h3>Events</h3>
+            <h3>Events of ElementsPanel</h3>
             <!-- iterates over all events -->
             <div class="apiItem">
               <a name="event-ElementsPanel-onSelectionChanged"></a>
@@ -1765,7 +1765,7 @@
           <dd>
             <div class="apiGroup" style="">
             <a name="global-ExtensionPanel-events"></a>
-            <h3>Events</h3>
+            <h3>Events of ExtensionPanel</h3>
             <!-- iterates over all events -->
             <div class="apiItem">
               <a name="event-ExtensionPanel-onSearch"></a>
@@ -1996,7 +1996,7 @@
           <dd>
             <div class="apiGroup">
             <a name="global-ExtensionSidebarPane-methods"></a>
-            <h3>Methods</h3>
+            <h3>Methods of ExtensionSidebarPane</h3>
 
             <!-- iterates over all functions -->
             <div class="apiItem">
@@ -2269,7 +2269,7 @@
           <dd>
             <div class="apiGroup">
             <a name="global-WatchExpressionSidebarPane-methods"></a>
-            <h3>Methods</h3>
+            <h3>Methods of WatchExpressionSidebarPane</h3>
 
             <!-- iterates over all functions -->
             <div class="apiItem">
diff --git a/chrome/common/extensions/docs/experimental.webInspector.resources.html b/chrome/common/extensions/docs/experimental.webInspector.resources.html
index 9da6718..60036e2 100644
--- a/chrome/common/extensions/docs/experimental.webInspector.resources.html
+++ b/chrome/common/extensions/docs/experimental.webInspector.resources.html
@@ -707,7 +707,7 @@
           <dd>
             <div class="apiGroup">
             <a name="global-Resource-methods"></a>
-            <h3>Methods</h3>
+            <h3>Methods of Resource</h3>
 
             <!-- iterates over all functions -->
             <div class="apiItem">
diff --git a/chrome/common/extensions/docs/extension.html b/chrome/common/extensions/docs/extension.html
index 6fdcd7d..9e99f0e 100644
--- a/chrome/common/extensions/docs/extension.html
+++ b/chrome/common/extensions/docs/extension.html
@@ -1029,7 +1029,7 @@ For details, see
                 <p>Returns the JavaScript 'window' object for the background page running inside the current extension. Returns null if the extension has no background page.</p>
 
                 <!-- PARAMETERS -->
-                <h4>Parameters</h4>
+                <h4 style="display: none; ">Parameters</h4>
                 <dl>
                   <div style="display: none; ">
                     <div>
diff --git a/chrome/common/extensions/docs/template/api_template.html b/chrome/common/extensions/docs/template/api_template.html
index 8081cecc..ae5a94d 100644
--- a/chrome/common/extensions/docs/template/api_template.html
+++ b/chrome/common/extensions/docs/template/api_template.html
@@ -344,7 +344,7 @@
           <div id="methodsTemplate" class="apiGroup"
                jsdisplay="$this.functions && $this.functions.length > 0">
             <a jsvalues=".name:getAnchorName('global', 'methods', $scope)"></a>
-            <h3>Methods</h3>
+            <h3 jscontent="$scope ? 'Methods of ' + $scope : 'Methods'">Methods</h3>
 
             <!-- iterates over all functions -->
             <div class="apiItem" jsselect="functions.sort(sortByName)"
@@ -364,7 +364,7 @@
                 </p>
 
                 <!-- PARAMETERS -->
-                <h4>Parameters</h4>
+                <h4 jsdisplay="$this.parameters && $this.parameters.length > 0">Parameters</h4>
                 <dl>
                   <div jsselect="parameters">
                     <div transclude="valueTemplate">
@@ -422,7 +422,7 @@
           <div id="eventsTemplate" class="apiGroup"
                jsdisplay="$this.events && $this.events.length > 0">
             <a jsvalues=".name:getAnchorName('global', 'events', $scope)"></a>
-            <h3>Events</h3>
+            <h3 jscontent="$scope ? 'Events of ' + $scope : 'Events'">Events</h3>
             <!-- iterates over all events -->
             <div class="apiItem" jsselect="$this.events.sort(sortByName)"
                  jsdisplay="!($this.nodoc)">