New home page for developer.chrome.com

And pillar pages for DevTools, Multi-device, and Platform.

Review URL: https://codereview.chromium.org/140743011

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

chrome/common/extensions/docs/static/sass/_homepage.scss

@@ -42,7 +42,7 @@
     &::before {
       display: block;
       content: '';
-      background: url("../images/bucket-icons.svg") 12px 50% no-repeat;
+      background: url("../../images/bucket-icons.svg") 12px 50% no-repeat;
       width: 100px;
       height: 65px;
       background-size: cover;

chrome/common/extensions/docs/static/sass/_html.scss

@@ -132,6 +132,10 @@ pre {
     @include background-image(linear-gradient(top, #008dfd 30%,#0370ea 100%));
     cursor: pointer;
   }
+
+  a {
+      color: inherit !important;
+  }
 }
 
 .button-alt {
@@ -372,7 +376,7 @@ pre {
   }
 
   .toggleIndicator {
-    background: url(../images/toggle_sprite.png) no-repeat 0 0;
+    background: url(../../images/toggle_sprite.png) no-repeat 0 0;
     height: 8px;
     position: absolute;
     right: 0;

chrome/common/extensions/docs/static/sass/_navbar.scss

@@ -35,7 +35,7 @@ $z-index-nav-hover: 1001;
 
   .collase-icon {
     display: none;
-    background: url("../images/burger-icon.png") 50% 100% no-repeat;
+    background: url("../../images/burger-icon.png") 50% 100% no-repeat;
     background-size: cover;
     width: 20px;
     height: 20px;
@@ -187,7 +187,7 @@ $z-index-nav-hover: 1001;
     input[type="search"] {
       width: 100%;
       @include box-sizing(border-box);
-      background: url("../images/search.png") no-repeat 15px 55%;
+      background: url("../../images/search.png") no-repeat 15px 55%;
       background-size: 20px;
       background-color: white;
       border: $default-border;

chrome/common/extensions/docs/static/sass/_pillar.scss

@@ -49,7 +49,7 @@ $panel-margin-right: 1.5em;
     &::before {
       display: inline-block;
       content: '';
-      background: url("../images/further-resources-icons.svg") 0 50% no-repeat;
+      background: url("../../images/further-resources-icons.svg") 0 50% no-repeat;
       width: 50px;
       height: 43px;
       background-size: cover;
@@ -160,6 +160,6 @@ $panel-margin-right: 1.5em;
   opacity: 1;
 }
 .down-arrow {
-  background-image: url("../images/down-arrow.png");
+  background-image: url("../../images/down-arrow.png");
 }
 

chrome/docs/devtools-pillar.html

@@ -0,0 +1,234 @@
+{{+content:partials.site}}
+<div class="pillar-content">
+
+  <h1>Chrome Developer Tools</h1>
+
+  <section class="article-list g-section">
+    <article class="new">
+    <h4 class="label">Styles &amp; the DOM</h4>
+    <h2>Editing Styles and the DOM</h2>
+    <p>
+      Use DevTools to do real-time editing of your web page.  You can edit the DOM directly or the CSS Style and see your changes rendered immediately.
+    </p>
+    <p><a href="docs/dom-and-styles.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/dom-pillar.png" alt="these should have alt text">
+    </article>
+
+    <article class="new">
+    <h4 class="label">Mobile DevTools</h4>
+    <h2>Remote Debugging on Android</h2>
+    <p>
+
+      You can now access your Android device directly in DevTools on your dev machine.  Just plug it in over USB and you can view and debug!
+    </p>
+    <p><a href="docs/remote-debugging.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/remote-debugging-pillar.jpg" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Learn Basics</h4>
+    <h2>DevTools Overview</h2>
+    <p>
+      A starting place if you haven't used DevTools before - this page will tell you everything you need to get started with the Chrome DevTools, from how to access the tools to a brief explanation of what the various menus and panels are used for.
+    </p>
+    <p><a href="index.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Command-line debugging</h4>
+    <h2>Using the console</h2>
+    <p>
+      The Javascript console in DevTools can be used to debug your Javascript code and log diagnostics, or you can also just use it as a shell to try out Javascript commands and interact with pages.
+    </p>
+    <p><a href="docs/console.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/console-pillar.png" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Mobile DevTools</h4>
+    <h2>Mobile Emulation</h2>
+    <p>
+      Need to debug for a device but don't have the device on hand?  DevTools can emulate many devices -- screen dimensions, touch events, geolocation, and user spoofing.
+    </p>
+    <p><a href="docs/mobile-emulation.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/emulation-pillar.png" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Learn Basics</h4>
+    <h2>Keyboard Shortcuts</h2>
+    <p>
+      Save more time in your development workflow -- here is a page full of keyboard shortcuts that will make things quicker when you are using DevTools.
+    </p>
+    <p><a href="docs/shortcuts.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/shortcuts-pillar.JPG" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Performance and Profiling</h4>
+    <h2>Javascript Memory Profiling</h2>
+    <p>
+      Does your page use too much memory or have a memory leak?  Find out how to get and analyze a heap profile.
+    </p>
+    <p><a href="docs/javascript-memory-profiling.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/memory-pillar.png" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Performance and Profiling</h4>
+    <h2>Performance Profiling: Timelines</h2>
+    <p>
+      Is your site running slow?  Analyze times for events, scripting, rendering, and painting using the Timeline.
+    </p>
+    <p><a href="docs/timeline.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/timeline-pillar.png" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Performance and Profiling</h4>
+    <h2>Javascript CPU Profiler</h2>
+    <p>
+      Find out how much CPU is being spent on your various Javascript functions with the Javascript CPU Profiler.
+    </p>
+    <p><a href="docs/cpu-profiling.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/cpuprofiler-pillar.png" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Performance and Profiling</h4>
+    <h2>Flame Charts</h2>
+    <p>
+      Flame charts show you a visualization of the call stack of your Javascript functions, and you can quickly find out how long each individual call takes.
+    </p>
+    <p><a href="docs/flame-charts.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/flamechart-pillar.png" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Debugging Tools</h4>
+    <h2>Javascript Debugging</h2>
+    <p>
+      Need to debug your Javascript?  DevTools has a suite of tools to let you step through code, set breakpoints, handle exceptions, and so on.
+    </p>
+    <p><a href="docs/javascript-debugging.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/jsdebugger-pillar.png" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Command-line debugging</h4>
+    <h2>Console API reference</h2>
+    <p>
+      Javascript functions you can call within the console or within your programs to log various results to the console.
+    </p>
+    <p><a href="docs/console-api.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Command-line debugging</h4>
+    <h2>Command Line API reference</h2>
+    <p>
+      Functions that you can call in the console for performing common tasks within the DevTools.
+    </p>
+    <p><a href="docs/console-api.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Learn Basics</h4>
+    <h2>Tips and Tricks</h2>
+    <p>
+      Various tips and tricks on things within the DevTools.
+    </p>
+    <p><a href="docs/tips-and-tricks.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">DevTools Reference</h4>
+    <h2>Settings</h2>
+    <p>
+      Let's learn some more about what you can control in the Settings panel.
+    </p>
+    <p><a href="docs/settings.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Learn Basics</h4>
+    <h2>Authoring and Development Workflow</h2>
+    <p>
+      Do you find that DevTools saves you some time and you wonder how to save more?  This page guides you through some ways to make your w\
+orkflow more efficient, both in editing files and styles but also with your Javascript and how you use the DevTools in general.
+    </p>
+    <p><a href="docs/authoring-development-workflow.html">Learn more\
+</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Styles & The DOM</h4>
+    <h2>Working with CSS Preprocessors</h2>
+    <p>
+      Are you using a CSS preprocessor such as Sass, Less, or Stylus?  You can live-edit your preprocessor source files in DevTools as easi\
+ly as editing straight CSS, and enable CSS source maps.
+    </p>
+    <p><a href="docs/css-preprocessors.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Mobile DevTools</h4>
+    <h2>Remote Debugging Protocol</h2>
+    <p>
+      Although we encourage you to use the new Screencast for debugging your Android devices, we do have Javascript runtime bindings for al\
+lowing DevTools to interact with mobile Chrome devices.
+    </p>
+    <p><a href="docs/debugger-protocol.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Contribute</h4>
+    <h2>Integrating with DevTools</h2>
+    <p>
+      Write new extensions and protocol clients to make new features for Chrome DevTools!
+    </p>
+    <p><a href="docs/integrating.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Learn Basics</h4>
+    <h2>Videos</h2>
+    <p>
+      Videos to get you started learning about Chrome DevTools.
+    </p>
+    <p><a href="docs/videos.html">Learn more</a></p>
+    </article>
+
+  </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. 
+        <p><a href="http://discover-devtools.codeschool.com/">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. 
+            <p><a href="docs/contributing.html">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.
+            <p><a href="docs/videos.html">Learn more</a></p>
+          </article>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</div>
+{{/partials.site}}