Index: chrome/common/extensions/docs/templates/articles/pillar.html |
diff --git a/chrome/common/extensions/docs/templates/articles/pillar.html b/chrome/common/extensions/docs/templates/articles/pillar.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..8562928d282ba74ce58219db835e065618c35f8a |
--- /dev/null |
+++ b/chrome/common/extensions/docs/templates/articles/pillar.html |
@@ -0,0 +1,138 @@ |
+<div class="pillar-content"> |
+ |
+ <h1>Chrome Developer Tools</h1> |
+ |
+ <section class="article-list g-section"> |
+ <article class="new"> |
+ <h4 class="label">Getting Started</h4> |
+ <h2>How to access the DevTools</h2> |
+ <p>The DevIools are organised into |
+ task-oriented groups in the toolbar at |
+ the top of the window. Each toolbar |
+ item and corresponding panel let you |
+ work with a specific type of page or app |
+ information, including DOM elements, |
+ resources, and sources. Curabitur dolor |
+ eros, gravida et, hendrerit ac, curses |
+ non, mass.,</p> |
+ <p><a href="">Learn more</a></p> |
+ </article> |
+ |
+ <article class="new"> |
+ <h4 class="label">Console</h4> |
+ <h2>The DevTools Window</h2> |
+ <p>The DevTools ore organized into |
+ task-oriented groups in the toolbar at |
+ the top of the window. Each toolbar |
+ item and corresponding panel let you</p> |
+ <p><a href="">Learn more</a></p> |
+ <img src="http://placekitten.com/300/100" alt="these should have alt text"> |
+ </article> |
+ |
+ <article> |
+ <h4 class="label">Timeline</h4> |
+ <h2>Improving rendering performance</h2> |
+ <p>The DevTools ore organized into task-oriented groups in the toolbar at the top of the window. Each toolbar</p> |
+ <p><a href="">Learn more</a></p> |
+ <img src="http://placekitten.com/300/150" alt="these should have alt text"> |
+ </article> |
+ |
+ <article> |
+ <h4 class="label">JavaScript</h4> |
+ <h2>Inspecting the DOM and styles</h2> |
+ <p>The DevTools ore organized into task-oriented groups in the toolbar at the top of the window. Each toolbar item and corresponding panel let you</p> |
+ <p><a href="">Learn more</a></p> |
+ <img src="http://placekitten.com/300/120" alt="these should have alt text"> |
+ </article> |
+ |
+ <article> |
+ <h4 class="label">Styles & The DOM</h4> |
+ <h2>Working with the console</h2> |
+ <p>The DevTools ore organized into task-oriented groups in the toolbar at the top of the window. Each toolbar item and corresponding panel let you</p> |
+ <p><a href="">Learn more</a></p> |
+ <img src="http://placekitten.com/300/220" alt="these should have alt text"> |
+ </article> |
+ |
+ <article> |
+ <h4 class="label">Mobile</h4> |
+ <h2>Timeline demo: Diagnosing forced synchronous layout</h2> |
+ <p>This demo shows how you can use the Timeline to identify a kind of performance bottle-neck called 'forced synchronous layouts', The demo application animates several images back and forth using requestAnimationFrame</p> |
+ <p><a href="">Learn more</a></p> |
+ </article> |
+ |
+ <article> |
+ <h4 class="label">Console</h4> |
+ <h2>Debugging JavaScript</h2> |
+ <p>The DevTools ore organized into task-oriented groups in the toolbar at the top of the window.</p> |
+ <p><a href="">Learn more</a></p> |
+ <img src="http://placekitten.com/300/165" alt="these should have alt text"> |
+ </article> |
+ |
+ <article> |
+ <h4 class="label"></h4> |
+ <h2>Improving network performance</h2> |
+ <p>The DevTools ore organized into task-oriented groups in the toolbar at the top of the window. Each toolbar</p> |
+ <p><a href="">Learn more</a></p> |
+ <img src="http://placekitten.com/300/140" alt="these should have alt text"> |
+ </article> |
+ |
+ <article> |
+ <h4 class="label">Timeline</h4> |
+ <h2>JavaScript & CSS performance</h2> |
+ <p>The DevTools ore organized into task-oriented groups in the toolbar at the top of the window. Each toolbar</p> |
+ <p><a href="">Learn more</a></p> |
+ <img src="http://placekitten.com/300/190" alt="these should have alt text"> |
+ </article> |
+ |
+ <article> |
+ <h4 class="label">Timeline</h4> |
+ <h2>Improving rendering performance</h2> |
+ <p>The DevTools ore organized into task-oriented groups in the toolbar at the top of the window. Each toolbar</p> |
+ <p><a href="">Learn more</a></p> |
+ <img src="http://placekitten.com/300/160" alt="these should have alt text"> |
+ </article> |
+ |
+ <article> |
+ <h4 class="label">Console</h4> |
+ <h2>Debugging JavaScript</h2> |
+ <p>The DevTools ore organized into task-oriented groups in the toolbar at the top of the window. Each toolbar</p> |
+ <p><a href="">Learn more</a></p> |
+ <img src="http://placekitten.com/300/185" alt="these should have alt text"> |
+ </article> |
+ |
+ <div class="load-more-articles"> |
+ <a href="" class="nav-arrow down-arrow">More articles</a> |
+ </div> |
+ |
+ </section> |
+ |
+ <section class="g-section g-tpl-33-67" id="further-resources"> |
+ <h2>Further Resources</h2> |
+ <div class="g-unit g-first"> |
+ <article class="g-content"> |
+ <h2 class="school">Code School</h2> |
+ <p>Explore and master the DevTools with our free "discover DevTools" courses. Nullam ultrices, dramt tempus vulputate egestas.</p> |
+ <p><a href="">Learn more</a></p> |
+ </article> |
+ </div> |
+ <div class="g-unit"> |
+ <div class="g-section g-tpl-50-50"> |
+ <div class="g-unit g-first"> |
+ <article class="g-content"> |
+ <h2 class="chat">Get Involved</h2> |
+ <p>Summit a bug or a feature request on DevTools, and help the community get better. Ultrices, diem5 ternpusvulputate egestas, eros pede</p> |
+ <p><a href="">Learn more</a></p> |
+ </article> |
+ </div> |
+ <div class="g-unit g-last"> |
+ <article class="g-content"> |
+ <h2 class="puzzle">Debug Extensions</h2> |
+ <p>Looking to use the DevTools to debug Chrome extensions? Watch our videos for more info. Nullam ultrices, to diem ternpus vulputate.</p> |
+ <p><a href="">Learn more</a></p> |
+ </article> |
+ </div> |
+ </div> |
+ </div> |
+ </section> |
+ |
+</div> |