MD Extensions: Error Console: Move code section closer to stack trace.

This will make the code/error association very explicit by keeping the
code snippet near the stack trace inside the error that is being
investigated.

See bug for screenshots/video.

Bug: 800994
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I7a781bd304b498edf2a5b19d58635824a54a575b
Reviewed-on: https://chromium-review.googlesource.com/861915
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#530354}

chrome/browser/resources/md_extensions/error_page.html

@@ -72,7 +72,7 @@
         margin: 0 10px;
       }
 
-      #errors-list {
+      #errorsList {
         min-height: 100px;
       }
 
@@ -131,7 +131,7 @@
         background: var(--google-blue-100);
       }
 
-      .dev-tool-button {
+      .devtool-button {
         margin-bottom: 20px;
         max-width: 300px;
       }
@@ -139,6 +139,7 @@
       extensions-code-section {
         background: white;
         height: 200px;
+        margin-bottom: 20px;
       }
 
       /* TODO(scottchen): extract to shared location from settings. */
@@ -184,10 +185,7 @@
           </paper-button>
         </div>
         <div class="section">
-          <extensions-code-section id="code-section"
-              could-not-display-code="$i18n{noErrorsToShow}">
-          </extensions-code-section>
-          <div id="errors-list">
+          <div id="errorsList">
             <template is="dom-repeat" items="[[entries_]]">
               <div class="item-container">
                 <div class$="error-item
@@ -201,8 +199,7 @@
                     <div id$="[[item.id]]" class="error-message">
                       [[item.message]]
                     </div>
-                    <div class$="cr-icon [[iconName_(index, selectedEntry_)]]"
-                        hidden="[[!computeIsRuntimeError_(item)]]">
+                    <div class$="cr-icon [[iconName_(index, selectedEntry_)]]">
                     </div>
                   </div>
                   <div class="separator"></div>
@@ -213,9 +210,10 @@
                       on-keydown="onDeleteErrorAction_">
                   </button>
                 </div>
-                <template is="dom-if" if="[[computeIsRuntimeError_(item)]]">
-                  <iron-collapse opened="[[isOpened_(index, selectedEntry_)]]">
-                    <div class="devtools-controls">
+                <iron-collapse opened="[[isOpened_(index, selectedEntry_)]]">
+                  <div class="devtools-controls">
+                    <template is="dom-if"
+                        if="[[computeIsRuntimeError_(item)]]">
                       <div class="details-heading">
                         $i18n{errorContext}
                       </div>
@@ -236,14 +234,21 @@
                           </li>
                         </template>
                       </ul>
-                      <paper-button class="devtool-button action-button"
-                          disabled="[[!item.canInspect]]"
-                          on-tap="onDevToolButtonTap_">
-                        $i18n{openInDevtool}
-                      </paper-button>
-                    </div>
-                  </iron-collapse>
-                </template>
+                    </template>
+                    <template is="dom-if"
+                        if="[[isOpened_(index, selectedEntry_)]]">
+                      <extensions-code-section code="[[code_]]"
+                          could-not-display-code="$i18n{noErrorsToShow}">
+                      </extensions-code-section>
+                    </template>
+                    <paper-button class="devtool-button action-button"
+                        hidden$="[[!computeIsRuntimeError_(item)]]"
+                        disabled="[[!item.canInspect]]"
+                        on-tap="onDevToolButtonTap_">
+                      $i18n{openInDevtool}
+                    </paper-button>
+                  </div>
+                </iron-collapse>
               </div>
             </template>
           </div>

chrome/browser/resources/md_extensions/error_page.js

@@ -84,6 +84,9 @@ cr.define('extensions', function() {
       /** @private {!Array<!(ManifestError|RuntimeError)>} */
       entries_: Array,
 
+      /** @private {?chrome.developerPrivate.RequestFileSourceResponse} */
+      code_: Object,
+
       /**
        * Index into |entries_|.
        * @private
@@ -191,10 +194,10 @@ cr.define('extensions', function() {
      * @private
      */
     onSelectedErrorChanged_: function() {
-      if (this.selectedEntry_ < 0) {
-        this.$['code-section'].code = null;
+      this.code_ = null;
+
+      if (this.selectedEntry_ < 0)
         return;
-      }
 
       const error = this.getSelectedError();
       const args = {
@@ -218,9 +221,7 @@ cr.define('extensions', function() {
               null;
           break;
       }
-      this.delegate.requestFileSource(args).then(code => {
-        this.$['code-section'].code = code;
-      });
+      this.delegate.requestFileSource(args).then(code => this.code_ = code);
     },
 
     /**
@@ -296,9 +297,7 @@ cr.define('extensions', function() {
             pathSuffix: getRelativeUrl(frame.url, selectedError),
             lineNumber: frame.lineNumber,
           })
-          .then(code => {
-            this.$['code-section'].code = code;
-          });
+          .then(code => this.code_ = code);
     },
 
     /** @private */
@@ -345,7 +344,7 @@ cr.define('extensions', function() {
     },
 
     /**
-     * @param {!{model: !{index: number}}} e
+     * @param {!{type: string, code: string, model: !{index: number}}} e
      * @private
      */
     onErrorItemAction_: function(e) {

chrome/test/data/webui/extensions/a11y/extensions_a11y_test.js

@@ -226,7 +226,7 @@ AccessibilityTest.define('CrExtensionsErrorConsoleA11yTest', {
   /** @override */
   tests: {
     'Accessible Error Console': function() {
-      assertTrue(!!document.querySelector('* /deep/ #errors-list'));
+      assertTrue(!!document.querySelector('* /deep/ #errorsList'));
     },
   },
 });

chrome/test/data/webui/extensions/extension_error_page_test.js

@@ -94,7 +94,7 @@ cr.define('extension_error_page_tests', function() {
       var testIsVisible = extension_test_util.isVisible.bind(null, errorPage);
       expectTrue(testIsVisible('#close-button'));
       expectTrue(testIsVisible('#heading'));
-      expectTrue(testIsVisible('#errors-list'));
+      expectTrue(testIsVisible('#errorsList'));
 
       var errorElements = errorPage.querySelectorAll('* /deep/ .error-item');
       expectEquals(1, errorElements.length);