Add ordering to menu entries, using a flexbox layout.

css/burichan.css

@@ -28,7 +28,7 @@
 }
 
 /* Menu */
-:root.burichan .entry:not(:last-child) {
+:root.burichan .entry {
   border-bottom: 1px solid #B7C5D9;
 }
 :root.burichan .focused.entry {

css/futaba.css

@@ -28,7 +28,7 @@
 }
 
 /* Menu */
-:root.futaba .entry:not(:last-child) {
+:root.futaba .entry {
   border-bottom: 1px solid #D9BFB7;
 }
 :root.futaba .focused.entry {

css/photon.css

@@ -28,7 +28,7 @@
 }
 
 /* Menu */
-:root.photon .entry:not(:last-child) {
+:root.photon .entry {
   border-bottom: 1px solid #CCC;
 }
 :root.photon .focused.entry {

css/style.css

@@ -493,12 +493,16 @@ a[href="javascript:;"] {
   vertical-align: middle;
 }
 #menu {
+  border-width: 1px 1px 0;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-flow: column nowrap;
+  flex-flow: column nowrap;
   position: absolute;
   outline: none;
 }
 .entry {
   cursor: pointer;
-  display: block;
   outline: none;
   padding: 3px 7px;
   position: relative;
@@ -522,6 +526,10 @@ a[href="javascript:;"] {
   display: none;
 }
 .submenu {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-flow: column nowrap;
+  flex-flow: column nowrap;
   position: absolute;
   margin: -1px 0;
 }

css/tomorrow.css

@@ -28,7 +28,7 @@
 }
 
 /* Menu */
-:root.tomorrow .entry:not(:last-child) {
+:root.tomorrow .entry {
   border-bottom: 1px solid #111;
 }
 :root.tomorrow .focused.entry {

css/yotsuba-b.css

@@ -28,7 +28,7 @@
 }
 
 /* Menu */
-:root.yotsuba-b .entry:not(:last-child) {
+:root.yotsuba-b .entry {
   border-bottom: 1px solid #B7C5D9;
 }
 :root.yotsuba-b .focused.entry {

css/yotsuba.css

@@ -28,7 +28,7 @@
 }
 
 /* Menu */
-:root.yotsuba .entry:not(:last-child) {
+:root.yotsuba .entry {
   border-bottom: 1px solid #D9BFB7;
 }
 :root.yotsuba .focused.entry {

lib/ui.coffee

@@ -174,6 +174,8 @@ UI = (->
         e.stopPropagation()
         @focus el
       ).bind @
+      {style} = el
+      style.webkitOrder = style.order = entry.order or 100
       return unless subEntries
       $.addClass el, 'has-submenu'
       for subEntry in subEntries

src/features.coffee

@@ -108,6 +108,7 @@ Settings =
     $.event 'AddMenuEntry',
       type: 'header'
       el: link
+      order: 100
 
     # 4chan settings link
     link = $.el 'a',
@@ -118,6 +119,7 @@ Settings =
     $.event 'AddMenuEntry',
       type: 'header'
       el: link
+      order: 101
       open: -> !Conf['Disable 4chan\'s extension']
 
     return unless Conf['Disable 4chan\'s extension']
@@ -308,6 +310,7 @@ Filter =
       entry =
         type: 'post'
         el: div
+        order: 50
         open: (post) ->
           Filter.menu.post = post
           true
@@ -485,6 +488,7 @@ ThreadHiding =
       $.event 'AddMenuEntry',
         type: 'post'
         el: div
+        order: 20
         open: ({thread, isReply}) ->
           if isReply or thread.isHidden
             return false
@@ -637,6 +641,7 @@ ReplyHiding =
       $.event 'AddMenuEntry',
         type: 'post'
         el: div
+        order: 20
         open: (post) ->
           if !post.isReply or post.isClone
             return false
@@ -806,6 +811,7 @@ ReportLink =
     $.event 'AddMenuEntry',
       type: 'post'
       el: a
+      order: 10
       open: (post) ->
         ReportLink.post = post
         !post.isDead
@@ -846,6 +852,7 @@ DeleteLink =
     $.event 'AddMenuEntry',
       type: 'post'
       el: div
+      order: 40
       open: (post) ->
         return false if post.isDead
         DeleteLink.post = post
@@ -935,6 +942,7 @@ DownloadLink =
     $.event 'AddMenuEntry',
       type: 'post'
       el: a
+      order: 70
       open: ({file}) ->
         return false unless file
         a.href     = file.URL
@@ -951,6 +959,7 @@ ArchiveLink =
     entry =
       type: 'post'
       el: div
+      order: 90
       open: ({ID: postID, thread: threadID, board}) ->
         redirect = Redirect.to {postID, threadID, board}
         redirect isnt "//boards.4chan.org/#{board}/"

src/qr.coffee

@@ -23,6 +23,7 @@ QR =
     $.event 'AddMenuEntry',
       type: 'header'
       el: link
+      order: 10
 
     $.on d, 'dragover',          QR.dragOver
     $.on d, 'drop',              QR.dropFile