Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(25)

Side by Side Diff: chrome/common/extensions/docs/server2/templates/intros/experimental_devtools_audits.html

Issue 10832042: Extensions Docs Server: Doc conversion script (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: script/build.py fixes Created 8 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 <!-- BEGIN AUTHORED CONTENT -->
2 <p id="classSummary"> 1 <p id="classSummary">
3 Use the <code>chrome.experimental.devtools.audits</code> module to add new audit 2 Use the <code>chrome.experimental.devtools.audits</code> module to add new audit
4 categories to Developer Tools' Audit panel. 3 categories to Developer Tools' Audit panel.
5 </p><p> 4 </p><p>
6 See <a href="experimental.devtools.html">DevTools APIs summary</a> for 5 See <a href="experimental.devtools.html">DevTools APIs summary</a> for
7 general introduction to using Developer Tools APIs</a>. 6 general introduction to using Developer Tools APIs</a>.
8 </p> 7 </p>
9
10 <h2>Overview</h2> 8 <h2>Overview</h2>
11
12 <p> 9 <p>
13 Each audit category is represented by a line on <em>Select audits to run</em> 10 Each audit category is represented by a line on <em>Select audits to run</em>
14 screen in the Audits panel. The following example adds a category named 11 screen in the Audits panel. The following example adds a category named
15 <em>Readability</em>:</p> 12 <em>Readability</em>:</p>
16 <pre> 13 <pre>
17 var category = chrome.experimental.devtools.audits.addCategory("Readability", 2) ; 14 var category = chrome.experimental.devtools.audits.addCategory("Readability", 2) ;
18 </pre> 15 </pre>
19 <img src="{{static}}/images/devtools-audits-category.png" 16 <img src="{{static}}/images/devtools-audits-category.png"
20 style="margin-left: 20px" 17 style="margin-left: 20px"
21 width="489" height="342" 18 width="489" height="342"
(...skipping 10 matching lines...) Expand all
32 <code>addCategory()</code> or 29 <code>addCategory()</code> or
33 calls AuditResult's <code>done()</code> method. 30 calls AuditResult's <code>done()</code> method.
34 </p> 31 </p>
35 <p>The results may include additional details visualized as an expandable 32 <p>The results may include additional details visualized as an expandable
36 tree by the Audits panel. You may build the details tree using the 33 tree by the Audits panel. You may build the details tree using the
37 <code>createResult()</code> and <code>addChild()</code> methods. The child node 34 <code>createResult()</code> and <code>addChild()</code> methods. The child node
38 may include specially formatted fragments created by the 35 may include specially formatted fragments created by the
39 <code>auditResults.createSnippet()</code> 36 <code>auditResults.createSnippet()</code>
40 and <code>auditResults.createURL()</code> methods. 37 and <code>auditResults.createURL()</code> methods.
41 </p> 38 </p>
42
43 <h2>Examples</h2> 39 <h2>Examples</h2>
44 <p>The following example adds a handler for onAuditStarted event that creates 40 <p>The following example adds a handler for onAuditStarted event that creates
45 two audit results and populates one of them with the additional details: 41 two audit results and populates one of them with the additional details:
46 </p> 42 </p>
47
48 <pre> 43 <pre>
49 category.onAuditStarted.addListener(function(results) { 44 category.onAuditStarted.addListener(function(results) {
50 var details = results.createResult("Details..."); 45 var details = results.createResult("Details...");
51 var styles = details.addChild("2 styles with small font"); 46 var styles = details.addChild("2 styles with small font");
52 var elements = details.addChild("3 elements with small font"); 47 var elements = details.addChild("3 elements with small font");
53
54 results.addResult("Font Size (5)", 48 results.addResult("Font Size (5)",
55 "5 elements use font size below 10pt", 49 "5 elements use font size below 10pt",
56 results.Severity.Severe, 50 results.Severity.Severe,
57 details); 51 details);
58 results.addResult("Contrast", 52 results.addResult("Contrast",
59 "Text should stand out from background", 53 "Text should stand out from background",
60 results.Severity.Info); 54 results.Severity.Info);
61 }); 55 });
62 </pre> 56 </pre>
63 <p>The audit result tree produced by the snippet above will look like this: 57 <p>The audit result tree produced by the snippet above will look like this:
64 </p> 58 </p>
65 <img src="{{static}}/images/devtools-audits-results.png" 59 <img src="{{static}}/images/devtools-audits-results.png"
66 style="margin-left: 20px" 60 style="margin-left: 20px"
67 width="330" height="169" 61 width="330" height="169"
68 alt="Audit results example" /> 62 alt="Audit results example" />
69
70 <p> 63 <p>
71 You can find more examples that use this API in 64 You can find more examples that use this API in
72 <a href="samples.html#devtools.audits">Samples</a>. 65 <a href="samples.html#devtools.audits">Samples</a>.
73 </p> 66 </p>
74 <!-- END AUTHORED CONTENT -->
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698