The context menu in the graphviewer now has style of OSX

js/apps/system/aardvark/frontend/css/jquery.contextmenu.css

@@ -0,0 +1,41 @@
+/* OSX Theme */
+/* ========= */
+.context-menu-theme-osx {
+  background-color:white;
+  opacity: .93;
+  filter: alpha(opacity=93);
+  zoom:1.0;
+  border:1px solid #b2b2b2;
+  padding: 3px 0px;
+  border-radius: 4px;
+}
+.context-menu-theme-osx .context-menu-item {
+  text-align:left;
+  cursor:pointer;
+  color:black;
+  font-family:Lucida Grande,Arial;
+  font-weight:700;
+  font-size:12px;
+  opacity: 1.0;
+  filter: alpha(opacity=100);
+  z-index:1;
+}
+.context-menu-theme-osx .context-menu-separator {
+  margin:5px 1px 4px 1px;
+  font-size:0px;
+  border-top:1px solid #e4e4e4;
+}
+.context-menu-theme-osx .context-menu-item:hover {
+  background-color:#1C44F2;
+  color:white;
+}
+.context-menu-theme-osx .context-menu-item .context-menu-item-inner {
+  padding:2px 10px 2px 22px;
+  background-color:none;
+  background-repeat:no-repeat;
+  background-position:4px center;
+  background-image:none;
+}
+.context-menu-theme-osx .context-menu-item-disabled {
+  color:#939393;
+}

js/apps/system/aardvark/manifest.json

@@ -100,6 +100,7 @@
         "frontend/css/arangodbIcons.css",
         "frontend/css/bootstrap-glyphicons.css",
         "frontend/css/jquery-ui-1.9.2.custom.css",
+        "frontend/css/jquery.contextmenu.css",
         "frontend/css/layout.css",
         "frontend/css/jquery.dataTables.css",
         "frontend/css/nv.d3.css",

js/apps/system/aardvark/test/specs/graphViewer/specContextMenu/contextMenuSpec.js

@@ -3,7 +3,7 @@
 /*global describe, it, expect, jasmine */
 /*global runs, spyOn, waitsFor, waits */
 /*global document, $*/
-/*global ContextMenu*/
+/*global ContextMenu, uiMatchers*/
 
 ////////////////////////////////////////////////////////////////////////////////
 /// @brief Graph functionality
@@ -66,6 +66,7 @@
         };
         spyOn($.contextMenu, "create").andReturn(fakeMenu);
         conMenu = new ContextMenu(id);
+        uiMatchers.define(this);
       });
 
       it("should create a div in the body", function() {
@@ -95,15 +96,19 @@
         spyOn(call, "back");
         conMenu.addEntry("MyLabel", call.back);
         // Check if entry is inserted
-        entry = document.getElementById(id).firstChild;
+        entry = document.getElementById(id);
         expect(entry).toBeDefined();
-        expect(entry.tagName.toLowerCase()).toEqual("ul");
+        expect(entry).toBeTag("div");
+        expect(entry).toBeOfClass("context-menu");
+        expect(entry).toBeOfClass("context-menu-theme-osx");
         entry = entry.firstChild;
         expect(entry).toBeDefined();
-        expect(entry.tagName.toLowerCase()).toEqual("li");
+        expect(entry).toBeTag("div");
+        expect(entry).toBeOfClass("context-menu-item");
         entry = entry.firstChild;
         expect(entry).toBeDefined();
-        expect(entry.tagName.toLowerCase()).toEqual("button");
+        expect(entry).toBeTag("div");
+        expect(entry).toBeOfClass("context-menu-item-inner");
         // Check clicks
         conMenu.bindMenu(fake);
         expect(call.back).not.toHaveBeenCalled();