[Blink-in-JS] 'Import' function to load sub-modules and other resources for private scripts (Part-3)

Source/core/xml/DocumentXMLTreeViewer.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.
 
 "use strict";
 
+Import("DocumentXMLTreeViewer.css");

[haraken, 2014/11/25 09:41:41]

Sorry for another idea: Would it be possible to allow a developer to write this
as follows?

  var cssDocumentXMLTreeViewer = import("DocumentXMLTreeViewer.css");

We don't want to pollute window objects with cssXXX or YYY implicitly.

[haraken, 2014/11/25 09:41:41]

Import => import ?

[vivekg, 2014/11/25 11:30:32]

I tried 'import' but this is a reserved keyword for ECMA 6.x. Hence ended up
making 'Import' to look analogous.

[vivekg, 2014/11/25 11:31:08]

Ya sure, let me try to get it this way which looks more cleaner. Thanks!

+
 installClass("Document", function(DocumentPrototype) {
-    // FIXME: The stylesheet should be defined in a separate css file
-    var styleSheet = [
-        "div.header {",
-        "    border-bottom: 2px solid black;",
-        "    padding-bottom: 5px;",
-        "    margin: 10px;",
-        "}",
-        "",
-        "div.collapsible > div.hidden {",
-        "    display:none;",
-        "}",
-        "",
-        ".pretty-print {",
-        "    margin-top: 1em;",
-        "    margin-left: 20px;",
-        "    font-family: monospace;",
-        "    font-size: 13px;",
-        "}",
-        "",
-        "#webkit-xml-viewer-source-xml {",
-        "    display: none;",
-        "}",
-        "",
-        ".collapsible-content {",
-        "    margin-left: 1em;",
-        "}",
-        ".comment {",
-        "    white-space: pre;",
-        "}",
-        "",
-        ".button {",
-        "    -webkit-user-select: none;",
-        "    cursor: pointer;",
-        "    display: inline-block;",
-        "    margin-left: -10px;",
-        "    width: 10px;",
-        "    background-repeat: no-repeat;",
-        "    background-position: left top;",
-        "    vertical-align: bottom;",
-        "}",
-        "",
-        ".collapse-button {",
-        "    background-image: -webkit-canvas(arrowDown);",
-        "    height: 10px;",
-        "}",
-        "",
-        ".expand-button {",
-        "    background-image: -webkit-canvas(arrowRight);",
-        "    height: 11px;",
-        "}"].join('');
     var nodeParentPairs = [];
     var tree;
 
     function prepareWebKitXMLViewer(noStyleMessage)
     {
         var html = createHTMLElement('html');
         var head = createHTMLElement('head');
         html.appendChild(head);
         var style = createHTMLElement('style');
         style.id = 'xml-viewer-style';
-        style.appendChild(document.createTextNode(styleSheet));
+        style.appendChild(document.createTextNode(cssDocumentXMLTreeViewer));
         head.appendChild(style);
         var body = createHTMLElement('body');
         html.appendChild(body);
         var sourceXML = createHTMLElement('div');
         sourceXML.id = 'webkit-xml-viewer-source-xml';
         body.appendChild(sourceXML);
 
         var child;
         while (child = document.firstChild) {
             document.removeChild(child);
@@ skipping 378 matching lines @@
     {
        // To prevent selection on double click
        e.preventDefault();
     }
 
     DocumentPrototype.transformDocumentToTreeView = function(noStyleMessage) {
         prepareWebKitXMLViewer(noStyleMessage);
     }
 });