Clean up menu focus by adding an input to serve as a focus proxy.

Fixes #74.

css/project.less

@@ -2,11 +2,10 @@
   @background: #444;
   @foreground: white;
   
-  overflow-x: hidden;
+  overflow-x: auto;
   overflow-y: auto;
   box-shadow: inset 4px 4px 16px rgba(0, 0, 0, .4);
   background: @background;
-  z-index: 99;
   flex-shrink: 0;
 
   transition: width .3s;
@@ -22,6 +21,7 @@
   a {
     text-decoration: none;
     color: inherit;
+    white-space: nowrap;
   }
   
   ul {
@@ -35,11 +35,11 @@
     text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);
     overflow: hidden;
     white-space: no-wrap;
-    padding: 4px;
+    padding: 4px 0px;
     
     & > ul {
       display: none;
-      padding-left: 4px;
+      padding-left: 6px;
     }
     
     &.expanded > ul {

css/ui.less

@@ -20,6 +20,7 @@
 
   //nested menus (default)
   li {
+    transition: opacity .2s;
     display: flex;
     padding: 4px 8px;
     justify-content: space-between;

js/menus.js

@@ -92,6 +92,10 @@ define([
   var Menu = function() {
     this.element = document.find(".toolbar");
     this.active = false;
+    //input serves to track focus
+    this.input = document.createElement("input");
+    this.input.style.width = this.input.style.height = "0px";
+    document.body.append(this.input);
     this.bindEvents();
   }
   Menu.prototype = {
@@ -105,7 +109,7 @@ define([
       var self = this;
       var menubar = this.element;
       menubar.addEventListener("click", function(e) {
-        menubar.focus();
+        self.input.focus();
         var el = e.target;
         if (el.hasClass("top")) {
           el.toggle("active");
@@ -128,6 +132,14 @@ define([
           el.addClass("active");
         }
       });
+      this.input.on("blur", function(e) {
+        if (e.relatedTarget == null) return;
+        //handle leaving the menu for something else
+        setTimeout(function() {
+          self.active = false;
+          self.deactivate();
+        });
+      });
     },
     deactivate: function() {
       this.element.findAll(".active").forEach(function(node) { node.removeClass("active") });
@@ -139,11 +151,6 @@ define([
   command.on("init:startup", menu.create.bind(menu));
   command.on("init:restart", menu.create.bind(menu));
 
-  editor.on("focus", function() {
-    menu.deactivate();
-    menu.active = false;
-  });
-
   command.on("app:about", function() {
     var content = document.find("#about").content.cloneNode(true).find("div").innerHTML;
     var manifest = chrome.runtime.getManifest();

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Caret",
   "description": "Professional text editing for Chrome and Chrome OS",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "manifest_version": 2,
   "icons": {
     "128": "icon-128.png"