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

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

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

Powered by Google App Engine
This is Rietveld 408576698