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

Source/core/xml/DocumentXMLTreeViewer.js

Index: Source/core/xml/DocumentXMLTreeViewer.js
diff --git a/Source/core/xml/DocumentXMLTreeViewer.js b/Source/core/xml/DocumentXMLTreeViewer.js
index ff682eefc9bc59671f8ca091d34688a7dde4efe5..8faa1ebf2609feb20c7699c6b2609528c70a3498 100644
--- a/Source/core/xml/DocumentXMLTreeViewer.js
+++ b/Source/core/xml/DocumentXMLTreeViewer.js
@@ -4,57 +4,9 @@
 
 "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;
 
@@ -65,7 +17,7 @@ installClass("Document", function(DocumentPrototype) {
         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);