Started to implement UI redesign for project.vt page. In the process, converted all of our .css files to .less (we don't convert thirdparties ones).

git-svn-id: http://google-refine.googlecode.com/svn/trunk@1420 7d457c2a-affb-35e4-300a-418c747d4874

main/webapp/modules/core/MOD-INF/controller.js

@@ -1,7 +1,7 @@
 var html = "text/html";
 var encoding = "UTF-8";
 var ClientSideResourceManager = Packages.com.google.refine.ClientSideResourceManager;
-var bundle = true;
+var bundle = false;
 
 var templatedFiles = {
     // Requests with last path segments mentioned here 
@@ -169,10 +169,10 @@ function init() {
         module,
         [
             "externals/jquery-ui/css/ui-lightness/jquery-ui-1.8.custom.css",
-            "styles/common.css",
+            "styles/common.less",
             "styles/freebase.css",
-            "styles/index.css",
+            "styles/index.less",
-            "styles/jquery-ui-overrides.css"
+            "styles/jquery-ui-overrides.less"
         ]
     );
     
@@ -205,7 +205,8 @@ function init() {
             "scripts/widgets/histogram-widget.js",
             "scripts/widgets/slider-widget.js",
 
-            "scripts/project/menu-bar.js",
+            "scripts/project/extension-bar.js",
+            "scripts/project/exporters.js",
             "scripts/project/browsing-engine.js",
             "scripts/project/scripting.js",
 
@@ -250,35 +251,35 @@ function init() {
             "externals/jquery-ui/css/ui-lightness/jquery-ui-1.8.custom.css",
             "externals/imgareaselect/css/imgareaselect-default.css",
     
-            "styles/common.css",
+            "styles/common.less",
-            "styles/jquery-ui-overrides.css",
+            "styles/jquery-ui-overrides.less",
     
-            "styles/util/menu.css",
+            "styles/util/menu.less",
-            "styles/util/dialog.css",
+            "styles/util/dialog.less",
-            "styles/util/custom-suggest.css",
+            "styles/util/custom-suggest.less",
 
-            "styles/project.css",
+            "styles/project.less",
-            "styles/project/browsing.css",
+            "styles/project/browsing.less",
-            "styles/project/process.css",
+            "styles/project/process.less",
-            "styles/project/menu-bar.css",
+            "styles/project/extension-bar.less",
             
-            "styles/widgets/history.css",
+            "styles/widgets/history.less",
-            "styles/widgets/histogram-widget.css",
+            "styles/widgets/histogram-widget.less",
-            "styles/widgets/slider-widget.css",
+            "styles/widgets/slider-widget.less",
             
-            "styles/views/data-table-view.css",
+            "styles/views/data-table-view.less",
             
-            "styles/dialogs/expression-preview-dialog.css",
+            "styles/dialogs/expression-preview-dialog.less",
-            "styles/dialogs/clustering-dialog.css",
+            "styles/dialogs/clustering-dialog.less",
-            "styles/dialogs/scatterplot-dialog.css",
+            "styles/dialogs/scatterplot-dialog.less",
-            "styles/dialogs/freebase-loading-dialog.css",
+            "styles/dialogs/freebase-loading-dialog.less",
-            "styles/dialogs/extend-data-preview-dialog.css",
+            "styles/dialogs/extend-data-preview-dialog.less",
-            "styles/dialogs/column-reordering-dialog.css",
+            "styles/dialogs/column-reordering-dialog.less",
             
-            "styles/reconciliation/recon-dialog.css",
+            "styles/reconciliation/recon-dialog.less",
-            "styles/reconciliation/standard-service-panel.css",
+            "styles/reconciliation/standard-service-panel.less",
             
-            "styles/protograph/schema-alignment-dialog.css"
+            "styles/protograph/schema-alignment-dialog.less"
         ]
     );
     
@@ -302,9 +303,9 @@ function init() {
             "externals/suggest/css/suggest-1.2.min.css",
             "externals/jquery-ui/css/ui-lightness/jquery-ui-1.8.custom.css",
             
-            "styles/common.css",
+            "styles/common.less",
-            "styles/jquery-ui-overrides.css",
+            "styles/jquery-ui-overrides.less",
-            "styles/preferences.css"
+            "styles/preferences.less"
         ]
     );
 }

main/webapp/modules/core/about.html

@@ -3,8 +3,8 @@
 <head>
     <title>About Google Refine</title>
     <link rel="icon" type="image/png" href="images/favicon.png">
-    <link rel="stylesheet" href="/styles/common.css" />
+    <link rel="stylesheet" href="/styles/common.less" />
-    <link rel="stylesheet" href="/styles/index.css" />
+    <link rel="stylesheet" href="/styles/index.less" />
     <script type="text/javascript" src="scripts/version.js"></script>
     <script type="text/javascript" src="externals/jquery-1.4.2.min.js"></script>
     <script>
@@ -65,8 +65,8 @@
 </head>
 <body>
     <div id="header">
-      <a id="logo" href="http://www.freebase.com/" title="Freebase"><img alt="Freebase" src="images/freebase-headerlogo.png" /></a>
+      <a id="app-home-button" href="./"><img alt="Google Refine" src="images/google-refine-home-button.png" /></a>
-      <div id="path"><span class="app-path-section"><a href="./">Google Refine</a></span></div>
+      <div id="path"><span class="app-path-section">About</span></div>
     </div>
 
     <div id="body">
@@ -213,6 +213,8 @@ Flag icon
                 <li><a href="http://www.freebase.com/view/en/jeff_fry">Jeff Fry</a></li>
                 <li><a href="http://www.freebase.com/view/en/james_home">James Home</a></li>
                 <li><a href="http://www.freebase.com/view/m/046vz5k">Iain Sproat</a></li>
+                <li><a href="http://www.freebase.com/view/user/tfmorris">Tom Morris</a></li>
+                <li><a href="http://www.freebase.com/view/user/heathercampbell">Heather Campbell</a></li>
             </ul>
 
             <h2>Special Thanks</h2>

main/webapp/modules/core/error.html

@@ -7,8 +7,8 @@
     
     <link rel="icon" type="image/png" href="images/favicon.png">
     
-    <link rel="stylesheet" href="styles/common.css" />
+    <link rel="stylesheet" href="styles/common.less" />
-    <link rel="stylesheet" href="styles/error.css" />
+    <link rel="stylesheet" href="styles/error.less" />
     
     <script type="text/javascript" src="externals/jquery-1.4.2.min.js"></script>
     <script type="text/javascript" src="scripts/util/url.js"></script>
@@ -26,8 +26,8 @@
 </head>
 <body>
     <div id="header">
-        <a id="logo" href="http://www.freebase.com/" title="Freebase"><img alt="Freebase" src="images/freebase-headerlogo.png" /></a>
+      <a id="app-home-button" href="./"><img alt="Google Refine" src="images/google-refine-home-button.png" /></a>
-        <div id="path"><span class="app-path-section"><a href="./">Google Refine</a></span></div>
+      <div id="path"><span class="app-path-section">Error</span></div>
     </div>
     
     <div id="body">

main/webapp/modules/core/index.vt

@@ -11,8 +11,8 @@
 <body>
     <div id="header">
       <span id="google-refine-version"></span>
-      <a id="logo" href="http://www.freebase.com/" title="Freebase"><img alt="Freebase" src="images/freebase-headerlogo.png" /></a>
+      <a id="app-home-button" href="./"><img alt="Google Refine" src="images/google-refine-home-button.png" /></a>
-      <div id="path"><span class="app-path-section"><a href="./">Google Refine</a></span></div>
+      <div id="path">&nbsp;</div>
     </div>
 
     <div id="body">

main/webapp/modules/core/preferences.vt

@@ -13,8 +13,8 @@
 </head>
 <body>
     <div id="header">
-        <a id="logo" href="http://www.freebase.com/" title="Freebase"><img alt="Freebase" src="images/freebase-headerlogo.png" /></a>
+      <a id="app-home-button" href="./"><img alt="Google Refine" src="images/google-refine-home-button.png" /></a>
-        <div id="path"><span class="app-path-section"><a href="./">Google Refine</a></span><span class="app-path-section">Preferences</span></div>
+      <div id="path"><span class="app-path-section">Preferences</span></div>
     </div>
     
     <div id="body">

main/webapp/modules/core/project.vt

@@ -14,12 +14,42 @@
 </head>
 <body>
     <div id="header">
-        <a id="logo" href="http://www.freebase.com/" title="Freebase"><img alt="Freebase" src="images/freebase-headerlogo.png" /></a>
+      <a id="app-home-button" href="./"><img alt="Google Refine" src="images/google-refine-home-button.png" /></a>
-        <div id="path"><span class="app-path-section"><a href="./">Google Refine</a></span></div>
+      <div id="path"><table id="header-layout"><tr>
+        <td id="header-layout-left">
+          <span id="project-name-button" class="app-path-section" title="Click to rename project"></span>
+          <a id="project-permalink-button" href="javascript:{}" class="permalink">Permalink</a></td>
+        <td id="header-layout-right">
+          <a class="app-menu-button" bind="exportButton" id="export-button" href="#export">Export</a>
+        </td></tr>
+      </table></div>
     </div>
     
+    <div id="loading-message"><img src="images/large-spinner.gif" /> starting up ...</div>
+    
     <div id="body">
-        <div id="loading-message"><img src="images/large-spinner.gif" /> starting up ...</div>
+      <div bind="leftPanel" id="left-panel">
+        <div bind="leftPanelTabs" class="refine-tabs">
+          <ul>
+            <li><a href="#refine-tabs-facets">Facet/Filter</a></li>
+            <li><a href="#refine-tabs-history" bind="historyTabHeader">Undo/Redo</a></li>
+          </ul>
+          <div id="refine-tabs-facets" bind="facetPanel" id="facet-panel"></div>
+          <div id="refine-tabs-history" bind="historyPanel" id="history-panel"></div>
+        </div>
+      </div>
+      <div bind="rightPanel" id="right-panel">
+        <div bind="toolPanel" id="tool-panel"><table id="tool-panel-layout"><tr>
+          <td id="summary-bar-container"><div bind="summaryBar" id="summary-bar">
+            <!-- row/record counts displayed here-->
+          </div></td>
+          <td id="extension-bar-container"><div bind="extensionBar" id="extension-bar">Extensions:&nbsp;<span bind="menuContainer" id="extension-bar-menu-container"></span>&nbsp;<a>Customize...</a></div></td>
+        </tr></table></div>
+        
+        <div bind="viewPanel" id="view-panel"></div>
+      </div>
+        
+      <div bind="processPanel" id="process-panel"></div>
     </div>
 </body>
 </html>

main/webapp/modules/core/scripts/project.js

@@ -14,30 +14,32 @@ Refine.reportException = function(e) {
 function resize() {
     var header = $("#header");
     
-    ui.menuBarContainer.css("top", header.outerHeight() + "px");
-
     var leftPanelWidth = 300;
-    var leftPanelMargin = 7;
     var width = $(window).width();
-    var top = ui.menuBarContainer.offset().top + ui.menuBarContainer.outerHeight();
+    var top = $("#header").outerHeight();
     var height = $(window).height() - top;
     
-    ui.viewPanel
+    ui.leftPanel
+        .css("top", top + "px")
+        .css("left", "0px")
+        .css("height", height + "px")
+        .css("width", leftPanelWidth + "px");
+        
+    var leftPanelPaddings = ui.leftPanel.outerHeight(true) - ui.leftPanel.height();
+    var leftPanelTabsPaddings = ui.leftPanelTabs.outerHeight(true) - ui.leftPanelTabs.height();
+    ui.leftPanelTabs.height(ui.leftPanel.height() - leftPanelTabsPaddings - leftPanelPaddings);
+    
+    var rightPanelVPaddings = ui.rightPanel.outerHeight(true) - ui.rightPanel.height();
+    var rightPanelHPaddings = ui.rightPanel.outerWidth(true) - ui.rightPanel.width();
+    ui.rightPanel
         .css("top", top + "px")
         .css("left", leftPanelWidth + "px")
-        .css("height", height + "px")
+        .css("height", (height - rightPanelVPaddings) + "px")
-        .css("width", (width - leftPanelWidth) + "px");
+        .css("width", (width - leftPanelWidth - rightPanelHPaddings) + "px");
+    
+    
+    ui.viewPanel.height((height - ui.toolPanel.outerHeight() - rightPanelVPaddings) + "px");
     
-    ui.leftPanel
-        .css("top", (top + leftPanelMargin) + "px")
-        .css("left", leftPanelMargin + "px")
-        .css("height", (height - 2 * leftPanelMargin) + "px")
-        .css("width", (leftPanelWidth - 2 * leftPanelMargin) + "px");
-        
-    var leftPanelTabsPaddings = ui.leftPanelTabs.outerHeight(true) - ui.leftPanelTabs.innerHeight();
-    ui.leftPanelTabs
-        .height(ui.leftPanel.height() - leftPanelTabsPaddings);
-        
     var processPanelWidth = 400;
     ui.processPanel
         .css("width", processPanelWidth + "px")
@@ -49,7 +51,7 @@ function resizeTabs() {
     var headerHeight = ui.leftPanelTabs.find(".ui-tabs-nav").outerHeight(true);
     
     var visibleTabPanels = ui.leftPanelTabs.find(".ui-tabs-panel:not(.ui-tabs-hide)");
-    var paddings = visibleTabPanels.innerHeight(true) - visibleTabPanels.height();
+    var paddings = visibleTabPanels.outerHeight(true) - visibleTabPanels.height();
     
     var allTabPanels = ui.leftPanelTabs.find(".ui-tabs-panel");
     allTabPanels.height(totalHeight - headerHeight - paddings - 1);
@@ -59,7 +61,7 @@ function resizeAll() {
     resize();
     resizeTabs();
     
-    ui.menuBar.resize();
+    ui.extensionBar.resize();
     ui.browsingEngine.resize();
     ui.processWidget.resize();
     ui.historyWidget.resize();
@@ -67,34 +69,21 @@ function resizeAll() {
 }
 
 function initializeUI(uiState) {
-    var path = $("#path");
+    $("#loading-message").hide();
-    $('<span class="app-path-section" id="project-name-in-path"></span>').appendTo(path);
+    $("#header-layout").show();
-    $('<a href="javascript:{}" class="permalink">permalink</a>')
+    $("#body").show();
-        .mouseenter(function() {
+    
-            this.href = Refine.getPermanentLink();
+    $('#project-name-button').click(Refine._renameProject);
-        }).appendTo(path);
+    $('#project-permalink-button').mouseenter(function() {
+        this.href = Refine.getPermanentLink();
+    });
     
     Refine.setTitle();
 
-    var body = $("#body").empty().html(
+    ui = DOM.bind($("#body"));
-        '<div bind="viewPanel" class="view-panel"></div>' +
-        '<div bind="processPanel" class="process-panel"></div>' +
-        '<div bind="leftPanel" class="left-panel">' +
-            '<div bind="leftPanelTabs" class="refine-tabs">' +
-                '<ul>' +
-                    '<li><a href="#refine-tabs-facets">Facet/Filter</a></li>' +
-                    '<li><a href="#refine-tabs-history" bind="historyTabHeader">Undo/Redo</a></li>' +
-                '</ul>' +
-                '<div id="refine-tabs-facets" bind="facetPanel" class="facet-panel"></div>' +
-                '<div id="refine-tabs-history" bind="historyPanel" class="history-panel"></div>' +
-            '</div>' +
-        '</div>' +
-        '<div class="menu-bar-container" bind="menuBarContainer"><div bind="menuBarPanel" class="menu-bar"></div></div>'
-    );
-    ui = DOM.bind(body);
     
-    ui.menuBarContainer.css("top", $("#header").outerHeight() + "px");
+    ui.extensionBar = new ExtensionBar(ui.extensionBar); // construct the menu first so we can resize everything else
-    ui.menuBar = new MenuBar(ui.menuBarPanel); // construct the menu first so we can resize everything else
+    ui.exporterManager = new ExporterManager($("#export-button"));
     
     ui.leftPanelTabs.tabs({ selected: 0 });
     resize();
@@ -127,10 +116,7 @@ Refine.setTitle = function(status) {
     }
     document.title = title;
     
-    var name = $("#project-name-in-path");
+    $("#project-name-button").text(theProject.metadata.name);
-    name.empty();
-    name.text('project: ');
-    $('<a href="#">' + theProject.metadata.name + '</a>').appendTo(name);
 };
 
 Refine.reinitializeProjectData = function(f) {
@@ -151,6 +137,33 @@ Refine.reinitializeProjectData = function(f) {
     );
 };
 
+Refine._renameProject = function() {
+    var name = window.prompt("Rename Project", theProject.metadata.name);
+    if (name == null) {
+        return;
+    }
+
+    name = $.trim(name);
+    if (theProject.metadata.name == name || name.length == 0) {
+        return;
+    }
+
+    $.ajax({
+        type: "POST",
+        url: "/command/core/rename-project",
+        data: { "project" : theProject.id, "name" : name },
+        dataType: "json",
+        success: function (data) {
+            if (data && typeof data.code != 'undefined' && data.code == "ok") {
+                theProject.metadata.name = name;
+                Refine.setTitle();
+            } else {
+                alert("Failed to rename project: " + data.message);
+            }
+        }
+    });
+};
+
 /*
  *  Utility state functions
  */

main/webapp/modules/core/scripts/project/exporters.js

@@ -0,0 +1,128 @@
+function ExporterManager(button) {
+    this._button = button;
+    this._initializeUI();
+}
+
+ExporterManager.handlers = {};
+
+ExporterManager.MenuItems = [
+    {
+        "id" : "core/export-project",
+        "label": "Export Project",
+        "click": function() { ExporterManager.handlers.exportProject(); }
+    },
+    {},
+    {
+        "id" : "core/export-tsv",
+        "label": "Tab-Separated Value",
+        "click": function() { ExporterManager.handlers.exportRows("tsv", "tsv"); }
+    },
+    {
+        "id" : "core/export-csv",
+        "label": "Comma-Separated Value",
+        "click": function() { ExporterManager.handlers.exportRows("csv", "csv"); }
+    },
+    {
+        "id" : "core/export-html-table",
+        "label": "HTML Table",
+        "click": function() { ExporterManager.handlers.exportRows("html", "html"); }
+    },
+    {
+        "id" : "core/export-excel",
+        "label": "Excel",
+        "click": function() { ExporterManager.handlers.exportRows("xls", "xls"); }
+    },
+    {},
+    {
+        "id" : "core/export-tripleloader",
+        "label": "Tripleloader",
+        "click": function() { ExporterManager.handlers.exportTripleloader("tripleloader"); }
+    },
+    {
+        "id" : "core/export-mqlwrite",
+        "label": "MQLWrite",
+        "click": function() { ExporterManager.handlers.exportTripleloader("mqlwrite"); }
+    },
+    {},
+    {
+        "id" : "core/export-templating",
+        "label": "Templating...",
+        "click": function() { new TemplatingExporterDialog(); }
+    }
+];
+
+ExporterManager.prototype._initializeUI = function() {
+    this._button.click(function(evt) {
+        MenuSystem.createAndShowStandardMenu(
+            ExporterManager.MenuItems,
+            this,
+            { horizontal: false }
+        );
+        
+        evt.preventDefault();
+        return false;
+    });
+};
+
+ExporterManager.handlers.exportTripleloader = function(format) {
+    if (!theProject.overlayModels.freebaseProtograph) {
+        alert(
+            "You haven't done any schema alignment yet,\nso there is no triple to export.\n\n" +
+            "Use the Schemas > Edit Schema Alignment Skeleton...\ncommand to align your data with Freebase schemas first."
+        );
+    } else {
+        ExporterManager.handlers.exportRows(format, "txt");
+    }
+};
+
+ExporterManager.handlers.exportRows = function(format, ext) {
+    var name = $.trim(theProject.metadata.name.replace(/\W/g, ' ')).replace(/\s+/g, '-');
+    var form = document.createElement("form");
+    $(form)
+        .css("display", "none")
+        .attr("method", "post")
+        .attr("action", "/command/core/export-rows/" + name + "." + ext)
+        .attr("target", "refine-export");
+
+    $('<input />')
+        .attr("name", "engine")
+        .attr("value", JSON.stringify(ui.browsingEngine.getJSON()))
+        .appendTo(form);
+    $('<input />')
+        .attr("name", "project")
+        .attr("value", theProject.id)
+        .appendTo(form);
+    $('<input />')
+        .attr("name", "format")
+        .attr("value", format)
+        .appendTo(form);
+
+    document.body.appendChild(form);
+
+    window.open("about:blank", "refine-export");
+    form.submit();
+    
+    document.body.removeChild(form);
+};
+
+ExporterManager.handlers.exportProject = function() {
+    var name = $.trim(theProject.metadata.name.replace(/\W/g, ' ')).replace(/\s+/g, '-');
+    var form = document.createElement("form");
+    $(form)
+        .css("display", "none")
+        .attr("method", "post")
+        .attr("action", "/command/core/export-project/" + name + ".google-refine.tar.gz")
+        .attr("target", "refine-export");
+    $('<input />')
+        .attr("name", "project")
+        .attr("value", theProject.id)
+        .appendTo(form);
+
+    document.body.appendChild(form);
+
+    window.open("about:blank", "refine-export");
+    form.submit();
+
+    document.body.removeChild(form);
+};
+

main/webapp/modules/core/scripts/project/extension-bar.js

@@ -0,0 +1,148 @@
+function ExtensionBar(div) {
+    this._div = div;
+    this._initializeUI();
+}
+
+ExtensionBar.MenuItems = [
+    {
+        "id" : "freebase",
+        "label" : "Freebase",
+        "submenu" : [
+            {
+                "id" : "freebase/schema-alignment",
+                label: "Edit Schema Aligment Skeleton ...",
+                click: function() { ExtensionBar.handlers.editSchemaAlignment(false); }
+            },
+            {
+                "id" : "freebase/reset-schema-alignment",
+                label: "Reset Schema Alignment Skeleton ...",
+                click: function() { ExtensionBar.handlers.editSchemaAlignment(true); }
+            },
+            {},
+            {
+                "id" : "freebase/load-info-freebase",
+                label: "Load into Freebase ...",
+                click: function() { ExtensionBar.handlers.loadIntoFreebase(); }
+            },
+            {
+                "id" : "freebase/browse-load",
+                label: "Browse to Data Load ...",
+                click: function() { ExtensionBar.handlers.browseToDataLoad(); }
+            },
+            {
+                "id" : "freebase/import-qa-data",
+                label: "Import QA Data",
+                click: function() { ExtensionBar.handlers.importQAData(); }
+            }
+        ]
+    }
+];
+
+ExtensionBar.addExtensionMenu = function(what) {
+    ExtensionBar.appendTo(ExtensionBar.MenuItems, [], what);
+}
+
+ExtensionBar.appendTo = function(path, what) {
+    ExtensionBar.appendTo(ExtensionBar.MenuItems, path, what);
+};
+
+ExtensionBar.insertBefore = function(path, what) {
+    MenuSystem.insertBefore(ExtensionBar.MenuItems, path, what);
+};
+
+ExtensionBar.insertAfter = function(path, what) {
+    MenuSystem.insertAfter(ExtensionBar.MenuItems, path, what);
+};
+
+ExtensionBar.prototype.resize = function() {
+};
+
+ExtensionBar.prototype._initializeUI = function() {
+    var elmts = DOM.bind(this._div);
+    for (var i = 0; i < ExtensionBar.MenuItems.length; i++) {
+        var menuItem = ExtensionBar.MenuItems[i];
+        var menuButton = this._createMenuButton(menuItem.label, menuItem.submenu);
+        elmts.menuContainer.append(menuButton);
+    }
+};
+
+ExtensionBar.prototype._createMenuButton = function(label, submenu) {
+    var self = this;
+
+    var menuItem = $("<a>").addClass("app-menu-button").text(label);
+    
+    menuItem.click(function(evt) {
+        MenuSystem.createAndShowStandardMenu(
+            submenu,
+            this,
+            { horizontal: false }
+        );
+
+        evt.preventDefault();
+        return false;
+    });
+    
+    return menuItem;
+};
+
+ExtensionBar.handlers = {};
+
+ExtensionBar.handlers.openWorkspaceDir = function() {
+    $.ajax({
+        type: "POST",
+        url: "/command/core/open-workspace-dir",
+        dataType: "json",
+        success: function (data) {
+            if (data.code != "ok" && "message" in data) {
+                alert(data.message);
+            }
+        }
+    });
+};
+
+ExtensionBar.handlers.editSchemaAlignment = function(reset) {
+    new SchemaAlignmentDialog(
+        reset ? null : theProject.overlayModels.freebaseProtograph, function(newProtograph) {});
+};
+
+ExtensionBar.handlers.loadIntoFreebase = function() {
+    new FreebaseLoadingDialog();
+};
+
+ExtensionBar.handlers.browseToDataLoad = function() {
+    // The form has to be created as part of the click handler. If you create it
+    // inside the getJSON success handler, it won't work.
+    
+    var form = document.createElement("form");
+    $(form)
+        .css("display", "none")
+        .attr("method", "GET")
+        .attr("target", "dataload");
+
+    document.body.appendChild(form);
+    var w = window.open("about:blank", "dataload");
+    
+    $.getJSON(
+        "/command/core/get-preference?" + $.param({ project: theProject.id, name: "freebase.load.jobID" }),
+        null,
+        function(data) {
+            if (data.value == null) {
+                alert("You have not tried to load the data in this project into Freebase yet.");
+            } else {
+                $(form).attr("action", "http://refinery.freebaseapps.com/load/" + data.value);
+                form.submit();
+                w.focus();
+            }
+            document.body.removeChild(form);
+        }
+    );
+};
+
+ExtensionBar.handlers.importQAData = function() {
+    Refine.postCoreProcess(
+        "import-qa-data",
+        {},
+        {},
+        { cellsChanged: true }
+    );
+};

main/webapp/modules/core/scripts/project/menu-bar.js

@@ -1,389 +0,0 @@
-function MenuBar(div) {
-    this._div = div;
-    this._initializeUI();
-}
-
-MenuBar.MenuItems = [
-    {
-        "id" : "core/project",
-        "label" : "Project",
-        "submenu" : [
-            /*
-            {
-                "label": "Data Model",
-                "submenu": [
-                    {
-                        "label": "Denormalize Records",
-                        "click": function() { MenuBar.handlers.denormalizeRecords(); }
-                    }
-                ]
-            },
-            {},
-            */
-            {
-                "id" : "core/rename-project",
-                "label": "Rename...",
-                "click": function() { MenuBar.handlers.renameProject(); }
-            },
-            {},
-            {
-                "id" : "core/export",
-                "label": "Export Filtered Rows",
-                "submenu": [
-                    {
-                        "id" : "core/export-tsv",
-                        "label": "Tab-Separated Value",
-                        "click": function() { MenuBar.handlers.exportRows("tsv", "tsv"); }
-                    },
-                    {
-                        "id" : "core/export-csv",
-                        "label": "Comma-Separated Value",
-                        "click": function() { MenuBar.handlers.exportRows("csv", "csv"); }
-                    },
-                    {
-                        "id" : "core/export-html-table",
-                        "label": "HTML Table",
-                        "click": function() { MenuBar.handlers.exportRows("html", "html"); }
-                    },
-                    {
-                        "id" : "core/export-excel",
-                        "label": "Excel",
-                        "click": function() { MenuBar.handlers.exportRows("xls", "xls"); }
-                    },
-                    {},
-                    {
-                        "id" : "core/export-tripleloader",
-                        "label": "Tripleloader",
-                        "click": function() { MenuBar.handlers.exportTripleloader("tripleloader"); }
-                    },
-                    {
-                        "id" : "core/export-mqlwrite",
-                        "label": "MQLWrite",
-                        "click": function() { MenuBar.handlers.exportTripleloader("mqlwrite"); }
-                    },
-                    {},
-                    {
-                        "id" : "core/export-templating",
-                        "label": "Templating...",
-                        "click": function() { new TemplatingExporterDialog(); }
-                    }
-                ]
-            },
-            {
-                "id" : "core/export-project",
-                "label": "Export Project",
-                "click": function() { MenuBar.handlers.exportProject(); }
-            },
-            {},
-            {
-                "id" : "core/open-workspace-dir",
-                "label": "Open Workspace Directory",
-                "click": function() { MenuBar.handlers.openWorkspaceDir(); }
-            }
-        ]
-    },
-    {
-        "id" : "core/schemas",
-        "label" : "Schemas",
-        "submenu" : [
-            /*{
-                "id" : "core/auto-schema-alignment",
-                label: "Auto-Align with Freebase ...",
-                click: function() { MenuBar.handlers.autoSchemaAlignment(); }
-            },*/
-            {
-                "id" : "core/schema-alignment",
-                label: "Edit Schema Aligment Skeleton ...",
-                click: function() { MenuBar.handlers.editSchemaAlignment(false); }
-            },
-            {
-                "id" : "core/reset-schema-alignment",
-                label: "Reset Schema Alignment Skeleton ...",
-                click: function() { MenuBar.handlers.editSchemaAlignment(true); }
-            },
-            {},
-            {
-                "id" : "core/load-info-freebase",
-                label: "Load into Freebase ...",
-                click: function() { MenuBar.handlers.loadIntoFreebase(); }
-            },
-            {
-                "id" : "core/browse-load",
-                label: "Browse to Data Load ...",
-                click: function() { MenuBar.handlers.browseToDataLoad(); }
-            },
-            {
-                "id" : "core/import-qa-data",
-                label: "Import QA Data",
-                click: function() { MenuBar.handlers.importQAData(); }
-            }
-        ]
-    }
-];
-
-MenuBar.appendTo = function(path, what) {
-    MenuBar.appendTo(MenuBar.MenuItems, path, what);
-};
-
-MenuBar.insertBefore = function(path, what) {
-    MenuSystem.insertBefore(MenuBar.MenuItems, path, what);
-};
-
-MenuBar.insertAfter = function(path, what) {
-    MenuSystem.insertAfter(MenuBar.MenuItems, path, what);
-};
-
-MenuBar.handlers = {};
-
-MenuBar.prototype.resize = function() {
-};
-
-MenuBar.prototype._initializeUI = function() {
-    this._mode = "inactive";
-    this._menuItemRecords = [];
-
-    this._div.addClass("menu-bar").html(" ");
-    this._innerDiv = $('<div></div>').addClass("menu-bar-inner").appendTo(this._div);
-
-    var self = this;
-    for (var i = 0; i < MenuBar.MenuItems.length; i++) {
-        var menuItem = MenuBar.MenuItems[i];
-        this._createTopLevelMenuItem(menuItem.label, menuItem.submenu);
-    }
-    this._wireAllMenuItemsInactive();
-};
-
-MenuBar.prototype._createTopLevelMenuItem = function(label, submenu) {
-    var self = this;
-
-    var menuItem = MenuSystem.createMenuItem().text(label).appendTo(this._innerDiv);
-
-    this._menuItemRecords.push({
-        menuItem: menuItem,
-        show: function() {
-            MenuSystem.dismissUntil(self._level);
-
-            menuItem.addClass("menu-expanded");
-
-            MenuSystem.createAndShowStandardMenu(
-                submenu,
-                this,
-                {
-                    horizontal: false,
-                    onDismiss: function() {
-                        menuItem.removeClass("menu-expanded");
-                    }
-                }
-            );
-        }
-    });
-};
-
-MenuBar.prototype._wireMenuItemInactive = function(record) {
-    var self = this;
-    var click = function() {
-        self._activateMenu();
-        record.show.apply(record.menuItem[0]);
-    };
-
-    record.menuItem.click(function() {
-        // because we're going to rewire the menu bar, we have to
-        // make this asynchronous, or jquery event binding won't work.
-        window.setTimeout(click, 100);
-    });
-};
-
-MenuBar.prototype._wireAllMenuItemsInactive = function() {
-    for (var i = 0; i < this._menuItemRecords.length; i++) {
-        this._wireMenuItemInactive(this._menuItemRecords[i]);
-    }
-};
-
-MenuBar.prototype._wireMenuItemActive = function(record) {
-    record.menuItem.mouseover(function() {
-        record.show.apply(this);
-    });
-};
-
-MenuBar.prototype._wireAllMenuItemsActive = function() {
-    for (var i = 0; i < this._menuItemRecords.length; i++) {
-        this._wireMenuItemActive(this._menuItemRecords[i]);
-    }
-};
-
-MenuBar.prototype._activateMenu = function() {
-    var self = this;
-
-    var top = this._innerDiv.offset().top;
-
-    this._innerDiv.remove().css("top", top + "px");
-    this._wireAllMenuItemsActive();
-    this._mode = "active";
-
-    this._level = MenuSystem.showMenu(this._innerDiv, function() {
-        self._deactivateMenu();
-    });
-};
-
-MenuBar.prototype._deactivateMenu = function() {
-    this._innerDiv.remove()
-        .css("z-index", "auto")
-        .css("top", "0px")
-        .appendTo(this._div);
-
-    this._wireAllMenuItemsInactive();
-    this._mode = "inactive";
-};
-
-MenuBar.handlers.exportTripleloader = function(format) {
-    if (!theProject.overlayModels.freebaseProtograph) {
-        alert(
-            "You haven't done any schema alignment yet,\nso there is no triple to export.\n\n" +
-            "Use the Schemas > Edit Schema Alignment Skeleton...\ncommand to align your data with Freebase schemas first."
-        );
-    } else {
-        MenuBar.handlers.exportRows(format, "txt");
-    }
-};
-
-MenuBar.handlers.exportRows = function(format, ext) {
-    var name = $.trim(theProject.metadata.name.replace(/\W/g, ' ')).replace(/\s+/g, '-');
-    var form = document.createElement("form");
-    $(form)
-        .css("display", "none")
-        .attr("method", "post")
-        .attr("action", "/command/core/export-rows/" + name + "." + ext)
-        .attr("target", "refine-export");
-
-    $('<input />')
-        .attr("name", "engine")
-        .attr("value", JSON.stringify(ui.browsingEngine.getJSON()))
-        .appendTo(form);
-    $('<input />')
-        .attr("name", "project")
-        .attr("value", theProject.id)
-        .appendTo(form);
-    $('<input />')
-        .attr("name", "format")
-        .attr("value", format)
-        .appendTo(form);
-
-    document.body.appendChild(form);
-
-    window.open("about:blank", "refine-export");
-    form.submit();
-    
-    document.body.removeChild(form);
-};
-
-MenuBar.handlers.exportProject = function() {
-    var name = $.trim(theProject.metadata.name.replace(/\W/g, ' ')).replace(/\s+/g, '-');
-    var form = document.createElement("form");
-    $(form)
-        .css("display", "none")
-        .attr("method", "post")
-        .attr("action", "/command/core/export-project/" + name + ".google-refine.tar.gz")
-        .attr("target", "refine-export");
-    $('<input />')
-        .attr("name", "project")
-        .attr("value", theProject.id)
-        .appendTo(form);
-
-    document.body.appendChild(form);
-
-    window.open("about:blank", "refine-export");
-    form.submit();
-
-    document.body.removeChild(form);
-};
-
-MenuBar.handlers.renameProject = function() {
-    var name = window.prompt("Rename Project", theProject.metadata.name);
-    if (name == null) {
-        return;
-    }
-
-    name = $.trim(name);
-    if (theProject.metadata.name == name || name.length == 0) {
-        return;
-    }
-
-    $.ajax({
-        type: "POST",
-        url: "/command/core/rename-project",
-        data: { "project" : theProject.id, "name" : name },
-        dataType: "json",
-        success: function (data) {
-            if (data && typeof data.code != 'undefined' && data.code == "ok") {
-                theProject.metadata.name = name;
-                Refine.setTitle();
-            } else {
-                alert("Failed to rename project: " + data.message);
-            }
-        }
-    });
-};
-
-MenuBar.handlers.openWorkspaceDir = function() {
-    $.ajax({
-        type: "POST",
-        url: "/command/core/open-workspace-dir",
-        dataType: "json",
-        success: function (data) {
-            if (data.code != "ok" && "message" in data) {
-                alert(data.message);
-            }
-        }
-    });
-};
-
-MenuBar.handlers.autoSchemaAlignment = function() {
-    //SchemaAlignment.autoAlign();
-};
-
-MenuBar.handlers.editSchemaAlignment = function(reset) {
-    new SchemaAlignmentDialog(
-        reset ? null : theProject.overlayModels.freebaseProtograph, function(newProtograph) {});
-};
-
-MenuBar.handlers.loadIntoFreebase = function() {
-    new FreebaseLoadingDialog();
-};
-
-MenuBar.handlers.browseToDataLoad = function() {
-    // The form has to be created as part of the click handler. If you create it
-    // inside the getJSON success handler, it won't work.
-    
-    var form = document.createElement("form");
-    $(form)
-        .css("display", "none")
-        .attr("method", "GET")
-        .attr("target", "dataload");
-
-    document.body.appendChild(form);
-    var w = window.open("about:blank", "dataload");
-    
-    $.getJSON(
-        "/command/core/get-preference?" + $.param({ project: theProject.id, name: "freebase.load.jobID" }),
-        null,
-        function(data) {
-            if (data.value == null) {
-                alert("You have not tried to load the data in this project into Freebase yet.");
-            } else {
-                $(form).attr("action", "http://refinery.freebaseapps.com/load/" + data.value);
-                form.submit();
-                w.focus();
-            }
-            document.body.removeChild(form);
-        }
-    );
-};
-
-MenuBar.handlers.importQAData = function() {
-    Refine.postCoreProcess(
-        "import-qa-data",
-        {},
-        {},
-        { cellsChanged: true }
-    );
-};

main/webapp/modules/core/styles/common.less

@@ -1,3 +1,5 @@
+@import-less url("theme.less");
+
 html {
     font-size: 62.5%;
     font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
@@ -146,53 +148,53 @@ img {
 }
 
 #header {
-    background: url(../images/header-background.png) repeat-x 0 0;
+    height: 40px;
-    border-bottom: 1px solid #ffb800;
-    height: 32px;
-    padding-bottom: 1px;
     position: relative;
     overflow: hidden;
+    background: white;
+    padding-left: 125px;
 }
-#logo {
+#app-home-button {
-    float: left;
+    position: absolute;
+    top: 50%;
+    margin-top: -16px;
+    left: 0px;
 }
 #path {
     position: absolute;
+    height: 40px;
     top: 50%;
     margin-top: -0.5em;
+    left: 125px;
+    right: 10px;
     line-height: 1em;
-    left: 70px;
-    height: 31px;
 }
 #path .app-path-section {
-    background: url(../images/path-delimiter.png) no-repeat center right;
+    font-size: 150%;
-    padding: 18px 20px 20px 20px;
+    margin: 0 0.5em;
+    padding: 0 0.5em;
 }
 #path a {
-    font-weight: bold;
     text-decoration: none;
-    color: #333;
 }
 #path a:hover {
     text-decoration: underline;
 }
 
-#path a.permalink {
-    padding: 18px 20px 20px 10px;
-    color: #ff6a00;
-}
-
-#footer {
-    font-size: 85%;
-    padding: 1em 0;
-    color: #666;
-    text-align: center;
-    border-top: 1px solid #ccc;
-}
-#footer a {
-    color: #448;
-}
-
 #body {
 }
 
+a.app-menu-button, #path a.app-menu-button {
+    text-decoration: none;
+    font-weight: bold;
+    padding: 4px 8px;
+    color: black;
+    background: #eee;
+    border: 1px solid #aaa;
+    border-radius: 5px;
+    cursor: pointer;
+}
+a.app-menu-button:hover, #path a.app-menu-button:hover {
+    text-decoration: none;
+    background: #white;
+}

main/webapp/modules/core/styles/dialogs/clustering-dialog.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 .clustering-dialog-table-container {
     height: 500px;
     overflow: auto;

main/webapp/modules/core/styles/dialogs/column-reordering-dialog.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 .column-reordering-dialog-column {
     border: 1px solid #aaa;
     background: #eee;

main/webapp/modules/core/styles/dialogs/expression-preview-dialog.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 #expression-preview-tabs .ui-tabs-nav li a {
     padding: 0.15em 1em;
 }

main/webapp/modules/core/styles/dialogs/extend-data-preview-dialog.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 .extend-data-preview-dialog .suggested-property-container {
     border: 1px solid #aaa;
     padding: 5px;

main/webapp/modules/core/styles/dialogs/freebase-loading-dialog.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 .freebase-loading-tripleloader-data {
     height: 400px;
     width: 99%;

main/webapp/modules/core/styles/dialogs/scatterplot-dialog.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 .scatterplot-dialog-selectors-container {
 }
 

main/webapp/modules/core/styles/error.css

@@ -1,3 +0,0 @@
-#body {
-    padding: 5em;
-}

main/webapp/modules/core/styles/error.less

@@ -0,0 +1,5 @@
+@import-less url("theme.less");
+
+#body {
+    padding: 5em;
+}

main/webapp/modules/core/styles/freebase.less

@@ -1,3 +1,5 @@
+@import-less url("theme.less");
+
 /*
 -----------------------------------------
 Buttons

main/webapp/modules/core/styles/jquery-ui-overrides.less

@@ -1,3 +1,5 @@
+@import-less url("theme.less");
+
 .refine-tabs.ui-tabs {
     padding: 0;
 }
@@ -9,7 +11,7 @@
     color: inherit;
 }
 .refine-tabs.ui-tabs .ui-tabs-nav {
-    padding: 0;
+    padding: 0 @padding_normal;
 }
 .refine-tabs.ui-tabs .ui-widget-header {
     background: none;
@@ -26,35 +28,46 @@
 
 .refine-tabs.ui-tabs .ui-tabs-nav .ui-state-default, 
 .refine-tabs.ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-default {
-    background: #C5D1D4;
+    background: none;
+    border: none;
 }
 
 .refine-tabs.ui-tabs .ui-tabs-nav .ui-state-default a, 
 .refine-tabs.ui-tabs .ui-tabs-nav .ui-state-default a:link, 
 .refine-tabs.ui-tabs .ui-tabs-nav .ui-state-default a:visited {
-    color: black;
+    color: @link_color;
+    font-weight: normal;
 }
 
 .refine-tabs.ui-tabs .ui-tabs-nav .ui-state-active, 
 .refine-tabs.ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-active {
-    background: #DBE8EB;
+    margin-top: 1px;
-    border: none;
+    border: 1px solid @line_accent;
+    border-bottom: none;
+    background: white;
     color: black;
+    font-weight: bold;
 }
 
 .refine-tabs.ui-tabs .ui-tabs-nav .ui-state-active a, 
 .refine-tabs.ui-tabs .ui-tabs-nav .ui-state-active a:link, 
 .refine-tabs.ui-tabs .ui-tabs-nav .ui-state-active a:visited {
     color: black;
+    font-weight: bold;
+}
+
+.refine-tabs.ui-tabs .ui-corner-top {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.refine-tabs.ui-tabs .ui-corner-bottom {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 .refine-tabs.ui-tabs .ui-tabs-panel {
     margin: 0px;
     padding: 15px;
-    border: 1px solid #DBE8EB;
+    border: 1px solid @line_accent;
-    background: #DBE8EB;
+    background: white;
-    -moz-border-radius: 7px;
-    -webkit-border-radius: 7px;
-    -moz-border-radius-topleft: 0px;
-    -webkit-border-top-left-radius: 0px;
 }

main/webapp/modules/core/styles/preferences.less

@@ -1,3 +1,5 @@
+@import-less url("theme.less");
+
 #body {
     padding: 5em;
     margin: 0;

main/webapp/modules/core/styles/project.less

@@ -0,0 +1,101 @@
+@import-less url("theme.less");
+
+body {
+    background: white;
+}
+
+#body {
+    padding: 0;
+    margin: 0;
+    display: none;
+}
+
+#header-layout {
+    display: none;
+    width: 100%;
+    border-collapse: collapse;
+    border: none;
+}
+#header-layout > tbody > tr > td {
+    padding: 0;
+}
+#header-layout-right {
+    text-align: right;
+}
+
+#project-name-button {
+  :hover {
+    background: #fffee0;
+  }
+}
+
+#project-permalink-button {
+}
+
+#loading-message {
+    text-align: center;
+    font-size: 300%;
+    color: #aaa;
+    padding: 1in;
+    font-style: italic;
+}
+
+#left-panel {
+    position: fixed;
+    overflow: hidden;
+    padding: 0px;
+    padding-top: @padding_tight;
+    font-size: 11px;
+    background: @fill_normal;
+}
+#right-panel {
+    position: fixed;
+    overflow: hidden;
+    padding: 0px;
+    padding-left: @padding_tight;
+    font-size: 11px;
+    background: @fill_accent;
+}
+
+#tool-panel {
+    padding: @padding_tight @padding_tight @padding_tight 0;
+}
+
+#tool-panel-layout {
+    width: 100%;
+    border-collapse: collapse;
+}
+#tool-panel-layout > tbody > tr >td {
+    padding: 0px;
+}
+
+#summary-bar-container {
+    padding: @padding_tight 0;
+}
+
+#extension-bar-container {
+    text-align: right;
+}
+
+#extension-bar {
+    padding: @padding_tight 0;
+}
+
+#view-panel {
+    background: white;
+    overflow: hidden;
+}
+#left-panel .refine-tabs.ui-tabs .ui-tabs-panel {
+    border-bottom: none;
+    border-left: none;
+    border-right: none;
+    padding: @padding_loose;
+    overflow: hidden;
+}
+
+#facet-panel {
+    overflow: auto;
+}
+#history-panel {
+    overflow: auto;
+}

main/webapp/modules/core/styles/project/browsing.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 .browsing-panel-modes {
     padding-bottom: 0.5em;
     text-align: center;

main/webapp/modules/core/styles/project/extension-bar.less

@@ -0,0 +1,7 @@
+@import-less url("../theme.less");
+
+#extension-bar {
+}
+
+#extension-bar-menu-container {
+}

main/webapp/modules/core/styles/project/menu-bar.css

@@ -1,22 +0,0 @@
-.menu-bar {
-    padding: 5px 10px;
-    background: #e8e8e8;
-    position: relative;
-    border-bottom: 1px solid #CCCCCC;    
-}
-
-.menu-bar-inner {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    padding: 5px 10px;
-}
-
-.menu-bar-inner a.menu-item {
-    display: inline;
-    padding: 5px 10px;
-}
-
-.menu-bar-inner a.menu-item:hover {
-    background: #ddd;
-}

main/webapp/modules/core/styles/project/process.less

@@ -1,4 +1,6 @@
-.process-panel {
+@import-less url("../theme.less");
+
+#process-panel {
     position: fixed;
     top: 0px;
     z-index: 1000;

main/webapp/modules/core/styles/protograph/schema-alignment-dialog.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 .schema-alignment-dialog-canvas {
     height: 400px;
     overflow: auto;

main/webapp/modules/core/styles/reconciliation/recon-dialog.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 .recon-dialog-service-list {
     border: 1px solid #aaa;
     padding: 1px;

main/webapp/modules/core/styles/reconciliation/standard-service-panel.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 .recon-dialog-standard-service-panel-message {
     text-align: center;
     font-size: 150%;

main/webapp/modules/core/styles/theme.less

@@ -0,0 +1,12 @@
+@fill_normal: #e3e9ff;
+@fill_accent: #bbccff;
+
+@line_accent: #bbccff;
+
+@padding_normal: 7px;
+@padding_tight: 5px;
+@padding_tighter: 3px;
+@padding_loose: 10px;
+@padding_looser: 15px;
+
+@link_color: blue;

main/webapp/modules/core/styles/util/custom-suggest.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 .fbs-pane-property, .fbs-pane-type {
     width: 400px;
 }

main/webapp/modules/core/styles/util/dialog.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 .dialog-overlay {
     position: fixed;
     padding: 0px;

main/webapp/modules/core/styles/util/menu.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 .menu-overlay {
     background: black;
     opacity: 0.15;

main/webapp/modules/core/styles/views/data-table-view.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 .viewPanel-summary-row-count {
     font-size: 150%;
     font-weight: bold;
@@ -16,7 +18,7 @@ a.viewPanel-pagingControls-page.inaction {
 }
 
 .data-table-container {
-    border: 1px solid #ccc;
+    border-top: 1px solid @line_accent;
     overflow: auto;
 }
 
@@ -53,7 +55,8 @@ table.data-table td.column-header {
     background: #e8e8e8;
     cursor: pointer;
     padding: 5px 5px;
-    border-bottom: 1px solid #ccc;
+    border-right: 1px solid #ccc;
+    border-bottom: double #ccc;
     white-space: pre;
     font-weight: bold;
 }

main/webapp/modules/core/styles/widgets/histogram-widget.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 .histogram-widget {
     margin: 0;
     padding: 0;

main/webapp/modules/core/styles/widgets/history.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 .history-panel-help {
     padding: 10px;
     background: white;

main/webapp/modules/core/styles/widgets/slider-widget.less

@@ -1,3 +1,5 @@
+@import-less url("../theme.less");
+
 .slider-widget {
     position: relative;
     overflow: visible;