[Extensions] Update Error Console UI

chrome/browser/resources/extensions/extension_code.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @typedef {{afterHighlight: string,
  *            beforeHighlight: string,
  *            highlight: string,
  *            title: string}}
  */
@@ skipping 25 matching lines @@
      *     both before and after this portion. The title is the error message,
      *     which will be the mouseover hint for the highlighted region. These
      *     may be empty.
      *  @param {string} emptyMessage The message to display if the code
      *     object is empty (e.g., 'could not load code').
      */
     populate: function(code, emptyMessage) {
       // Clear any remnant content, so we don't have multiple code listed.
       this.clear();
 
+      // If there's no code, then display an appropriate message.
+      if (!code ||
+          (!code.highlight && !code.beforeHighlight && !code.afterHighlight)) {
+        var span = document.createElement('span');
+        span.classList.add('extension-code-empty');
+        span.textContent = emptyMessage;
+        this.appendChild(span);
+        return;
+      }
+
       var sourceDiv = document.createElement('div');
       sourceDiv.classList.add('extension-code-source');
       this.appendChild(sourceDiv);
 
-      // If there's no code, then display an appropriate message.
-      if (!code ||
-          (!code.highlight && !code.beforeHighlight && !code.afterHighlight)) {
-        var span = document.createElement('span');
-        span.textContent = emptyMessage;
-        sourceDiv.appendChild(span);
-        return;
-      }
-
       var lineCount = 0;
       var createSpan = function(source, isHighlighted) {
         lineCount += source.split('\n').length - 1;
         var span = document.createElement('span');
         span.className = isHighlighted ? 'extension-code-highlighted-source' :
                                          'extension-code-normal-source';
         span.textContent = source;
         return span;
       };
 
@@ skipping 40 matching lines @@
       if (errorSpan)
         this.scrollTop = errorSpan.offsetTop - this.clientHeight / 2;
     }
   };
 
   // Export
   return {
     ExtensionCode: ExtensionCode
   };
 });