Use "flame" notification icon and bubble instead of lightning bolt

Summary: Switch to the final versions of these

Test Plan: Will add screenshots...

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D4032

resources/sprite/manifest/menu.json

@@ -0,0 +1,35 @@
+{
+  "version" : 1,
+  "sprites" : {
+    "bubble"           : {
+      "name" : "bubble",
+      "rule" : ".phabricator-main-menu-alert-bubble.alert-unread",
+      "hash" : "07bc6fd60e5c2fa14558c9101cba5261"
+    },
+    "round_bubble"     : {
+      "name" : "round_bubble",
+      "rule" : ".phabricator-main-menu-alert-bubble",
+      "hash" : "02de5b1c1720749a566e7a4cf7c2216c"
+    },
+    "seen_have_unread" : {
+      "name" : "seen_have_unread",
+      "rule" : ".alert-notifications:hover .phabricator-main-menu-alert-icon",
+      "hash" : "d0210b3908193ee841db2eeec264a154"
+    },
+    "seen_read_all"    : {
+      "name" : "seen_read_all",
+      "rule" : ".alert-notifications .phabricator-main-menu-alert-icon",
+      "hash" : "8d0644ec8fa33330b30b7531272e24f1"
+    },
+    "unseen_any"       : {
+      "name" : "unseen_any",
+      "rule" : ".alert-notifications.alert-unread .phabricator-main-menu-alert-icon",
+      "hash" : "0e50bf01f640b2f8231eaef246863f0b"
+    }
+  },
+  "scales"  : [
+    1,
+    2
+  ],
+  "header"  : "\/**\n * @provides sprite-menu-css\n * @generated\n *\/\n\n.sprite-menu {\n  background-image: url(\/rsrc\/image\/sprite-menu.png);\n  background-repeat: no-repeat;\n}\n\n@media\nonly screen and (min-device-pixel-ratio: 1.5),\nonly screen and (-webkit-min-device-pixel-ratio: 1.5) {\n  .sprite-menu {\n    background-image: url(\/rsrc\/image\/sprite-menu-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}"
+}

scripts/celerity/generate_sprites.php

@@ -18,7 +18,11 @@ $args->parse(
       'name'  => 'source',
       'param' => 'directory',
       'help'  => 'Directory with sprite sources.',
-    )
+    ),
+    array(
+      'name'  => 'force',
+      'help'  => 'Force regeneration even if sources have not changed.',
+    ),
   ));
 
 $srcroot = $args->getArg('source');
@@ -76,7 +80,6 @@ $icon_map = array(
   'help'          => array(4, 19),
   'settings'      => array(0, 28),
   'logout'        => array(3, 6),
-  'notifications' => array(5, 20),
   'task'          => array(1, 15),
 );
 
@@ -193,12 +196,28 @@ $sheet->generateCSS($webroot.'/css/autosprite.css');
 
 $generator = new CeleritySpriteGenerator();
 
-$generator
+$sheets = array(
-  ->buildIconSheet()
+  'icon' => $generator->buildIconSheet(),
-  ->setScales(array(1, 2))
+  'menu' => $generator->buildMenuSheet(),
-  ->generateImage($webroot.'/image/sprite-icon.png', 1)
+);
-  ->generateImage($webroot.'/image/sprite-icon-X2.png', 2)
+
-  ->generateCSS($webroot.'/css/sprite-icon.css')
+foreach ($sheets as $name => $sheet) {
-  ->generateManifest($root.'/resources/sprite/manifest/icon.json');
+  $manifest_path = $root.'/resources/sprite/manifest/'.$name.'.json';
+  if (!$args->getArg('force')) {
+    if (Filesystem::pathExists($manifest_path)) {
+      $data = Filesystem::readFile($manifest_path);
+      $data = json_decode($data, true);
+      if (!$sheet->needsRegeneration($data)) {
+        continue;
+      }
+    }
+  }
+
+  $sheet
+    ->generateImage($webroot."/image/sprite-{$name}.png", 1)
+    ->generateImage($webroot."/image/sprite-{$name}-X2.png", 2)
+    ->generateCSS($webroot."/css/sprite-{$name}.css")
+    ->generateManifest($root."/resources/sprite/manifest/{$name}.json");
+}
 
 echo "Done.\n";

src/__celerity_resource_map__.php

@@ -51,8 +51,8 @@ celerity_register_resource_map(array(
   ),
   '/rsrc/image/autosprite.png' =>
   array(
-    'hash' => '0b1fd04e70272fe946dff765237d132a',
+    'hash' => '7d4b49765c805bad0e2b59c0b578d975',
-    'uri' => '/res/0b1fd04e/rsrc/image/autosprite.png',
+    'uri' => '/res/7d4b4976/rsrc/image/autosprite.png',
     'disk' => '/rsrc/image/autosprite.png',
     'type' => 'png',
   ),
@@ -546,6 +546,20 @@ celerity_register_resource_map(array(
     'disk' => '/rsrc/image/sprite-icon.png',
     'type' => 'png',
   ),
+  '/rsrc/image/sprite-menu-X2.png' =>
+  array(
+    'hash' => 'a7d32533fc67766ed44acc37bb1c8b64',
+    'uri' => '/res/a7d32533/rsrc/image/sprite-menu-X2.png',
+    'disk' => '/rsrc/image/sprite-menu-X2.png',
+    'type' => 'png',
+  ),
+  '/rsrc/image/sprite-menu.png' =>
+  array(
+    'hash' => '0b2d293e89259d70aacb0c92a49e6a0c',
+    'uri' => '/res/0b2d293e/rsrc/image/sprite-menu.png',
+    'disk' => '/rsrc/image/sprite-menu.png',
+    'type' => 'png',
+  ),
   '/rsrc/image/sprite.png' =>
   array(
     'hash' => '8c6200d3191c0deea30f22e7b8166b15',
@@ -734,7 +748,7 @@ celerity_register_resource_map(array(
   ),
   'autosprite-css' =>
   array(
-    'uri' => '/res/e1084d7c/rsrc/css/autosprite.css',
+    'uri' => '/res/dc17189f/rsrc/css/autosprite.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -951,7 +965,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-aphlict-dropdown' =>
   array(
-    'uri' => '/res/dc8f194b/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js',
+    'uri' => '/res/e9b6fd18/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -2588,7 +2602,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-main-menu-view' =>
   array(
-    'uri' => '/res/8c3aaa49/rsrc/css/application/base/main-menu-view.css',
+    'uri' => '/res/1a088c24/rsrc/css/application/base/main-menu-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3110,6 +3124,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/sprite-icon.css',
   ),
+  'sprite-menu-css' =>
+  array(
+    'uri' => '/res/d0239d8c/rsrc/css/sprite-menu.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/sprite-menu.css',
+  ),
   'stripe-core' =>
   array(
     'uri' => '/res/3b0f0ad4/rsrc/js/stripe/stripe_core.js',
@@ -3140,7 +3163,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    '230c5ef4' =>
+    'a567467a' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -3179,10 +3202,10 @@ celerity_register_resource_map(array(
         31 => 'phabricator-filetree-view-css',
         32 => 'phabricator-nav-view-css',
       ),
-      'uri' => '/res/pkg/230c5ef4/core.pkg.css',
+      'uri' => '/res/pkg/a567467a/core.pkg.css',
       'type' => 'css',
     ),
-    'd223b82c' =>
+    'a29ae2c4' =>
     array(
       'name' => 'core.pkg.js',
       'symbols' =>
@@ -3219,7 +3242,7 @@ celerity_register_resource_map(array(
         29 => 'phabricator-textareautils',
         30 => 'phabricator-file-upload',
       ),
-      'uri' => '/res/pkg/d223b82c/core.pkg.js',
+      'uri' => '/res/pkg/a29ae2c4/core.pkg.js',
       'type' => 'js',
     ),
     '3c5efda9' =>
@@ -3369,21 +3392,21 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => '7839ae2d',
-    'aphront-crumbs-view-css' => '230c5ef4',
+    'aphront-crumbs-view-css' => 'a567467a',
-    'aphront-dialog-view-css' => '230c5ef4',
+    'aphront-dialog-view-css' => 'a567467a',
-    'aphront-error-view-css' => '230c5ef4',
+    'aphront-error-view-css' => 'a567467a',
-    'aphront-form-view-css' => '230c5ef4',
+    'aphront-form-view-css' => 'a567467a',
     'aphront-headsup-action-list-view-css' => '47549184',
-    'aphront-headsup-view-css' => '230c5ef4',
+    'aphront-headsup-view-css' => 'a567467a',
-    'aphront-list-filter-view-css' => '230c5ef4',
+    'aphront-list-filter-view-css' => 'a567467a',
-    'aphront-pager-view-css' => '230c5ef4',
+    'aphront-pager-view-css' => 'a567467a',
-    'aphront-panel-view-css' => '230c5ef4',
+    'aphront-panel-view-css' => 'a567467a',
-    'aphront-side-nav-view-css' => '230c5ef4',
+    'aphront-side-nav-view-css' => 'a567467a',
-    'aphront-table-view-css' => '230c5ef4',
+    'aphront-table-view-css' => 'a567467a',
-    'aphront-tokenizer-control-css' => '230c5ef4',
+    'aphront-tokenizer-control-css' => 'a567467a',
-    'aphront-tooltip-css' => '230c5ef4',
+    'aphront-tooltip-css' => 'a567467a',
-    'aphront-typeahead-control-css' => '230c5ef4',
+    'aphront-typeahead-control-css' => 'a567467a',
-    'autosprite-css' => '230c5ef4',
+    'autosprite-css' => 'a567467a',
     'differential-changeset-view-css' => '47549184',
     'differential-core-view-css' => '47549184',
     'differential-inline-comment-editor' => '7ecd31fa',
@@ -3398,18 +3421,18 @@ celerity_register_resource_map(array(
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
     'inline-comment-summary-css' => '47549184',
-    'javelin-aphlict' => 'd223b82c',
+    'javelin-aphlict' => 'a29ae2c4',
     'javelin-behavior' => '20727878',
-    'javelin-behavior-aphlict-dropdown' => 'd223b82c',
+    'javelin-behavior-aphlict-dropdown' => 'a29ae2c4',
-    'javelin-behavior-aphlict-listen' => 'd223b82c',
+    'javelin-behavior-aphlict-listen' => 'a29ae2c4',
-    'javelin-behavior-aphront-basic-tokenizer' => 'd223b82c',
+    'javelin-behavior-aphront-basic-tokenizer' => 'a29ae2c4',
     'javelin-behavior-aphront-drag-and-drop' => '7ecd31fa',
     'javelin-behavior-aphront-drag-and-drop-textarea' => '7ecd31fa',
-    'javelin-behavior-aphront-form-disable-on-submit' => 'd223b82c',
+    'javelin-behavior-aphront-form-disable-on-submit' => 'a29ae2c4',
     'javelin-behavior-audit-preview' => '5e68be89',
     'javelin-behavior-dark-console' => '3c5efda9',
     'javelin-behavior-dark-console-ajax' => '3c5efda9',
-    'javelin-behavior-device' => 'd223b82c',
+    'javelin-behavior-device' => 'a29ae2c4',
     'javelin-behavior-differential-accept-with-errors' => '7ecd31fa',
     'javelin-behavior-differential-add-reviewers-and-ccs' => '7ecd31fa',
     'javelin-behavior-differential-comment-jump' => '7ecd31fa',
@@ -3425,27 +3448,27 @@ celerity_register_resource_map(array(
     'javelin-behavior-diffusion-commit-graph' => '5e68be89',
     'javelin-behavior-diffusion-pull-lastmodified' => '5e68be89',
     'javelin-behavior-error-log' => '3c5efda9',
-    'javelin-behavior-konami' => 'd223b82c',
+    'javelin-behavior-konami' => 'a29ae2c4',
-    'javelin-behavior-lightbox-attachments' => 'd223b82c',
+    'javelin-behavior-lightbox-attachments' => 'a29ae2c4',
     'javelin-behavior-maniphest-batch-selector' => '7707de41',
     'javelin-behavior-maniphest-subpriority-editor' => '7707de41',
     'javelin-behavior-maniphest-transaction-controls' => '7707de41',
     'javelin-behavior-maniphest-transaction-expand' => '7707de41',
     'javelin-behavior-maniphest-transaction-preview' => '7707de41',
-    'javelin-behavior-phabricator-active-nav' => 'd223b82c',
+    'javelin-behavior-phabricator-active-nav' => 'a29ae2c4',
-    'javelin-behavior-phabricator-autofocus' => 'd223b82c',
+    'javelin-behavior-phabricator-autofocus' => 'a29ae2c4',
-    'javelin-behavior-phabricator-keyboard-shortcuts' => 'd223b82c',
+    'javelin-behavior-phabricator-keyboard-shortcuts' => 'a29ae2c4',
-    'javelin-behavior-phabricator-nav' => 'd223b82c',
+    'javelin-behavior-phabricator-nav' => 'a29ae2c4',
     'javelin-behavior-phabricator-object-selector' => '7ecd31fa',
-    'javelin-behavior-phabricator-oncopy' => 'd223b82c',
+    'javelin-behavior-phabricator-oncopy' => 'a29ae2c4',
-    'javelin-behavior-phabricator-remarkup-assist' => 'd223b82c',
+    'javelin-behavior-phabricator-remarkup-assist' => 'a29ae2c4',
-    'javelin-behavior-phabricator-search-typeahead' => 'd223b82c',
+    'javelin-behavior-phabricator-search-typeahead' => 'a29ae2c4',
-    'javelin-behavior-phabricator-tooltips' => 'd223b82c',
+    'javelin-behavior-phabricator-tooltips' => 'a29ae2c4',
-    'javelin-behavior-phabricator-watch-anchor' => 'd223b82c',
+    'javelin-behavior-phabricator-watch-anchor' => 'a29ae2c4',
-    'javelin-behavior-refresh-csrf' => 'd223b82c',
+    'javelin-behavior-refresh-csrf' => 'a29ae2c4',
     'javelin-behavior-repository-crossreference' => '7ecd31fa',
-    'javelin-behavior-toggle-class' => 'd223b82c',
+    'javelin-behavior-toggle-class' => 'a29ae2c4',
-    'javelin-behavior-workflow' => 'd223b82c',
+    'javelin-behavior-workflow' => 'a29ae2c4',
     'javelin-color' => '20727878',
     'javelin-dom' => '20727878',
     'javelin-event' => '20727878',
@@ -3466,42 +3489,42 @@ celerity_register_resource_map(array(
     'javelin-util' => '20727878',
     'javelin-vector' => '20727878',
     'javelin-workflow' => '20727878',
-    'lightbox-attachment-css' => '230c5ef4',
+    'lightbox-attachment-css' => 'a567467a',
     'maniphest-task-summary-css' => '7839ae2d',
     'maniphest-transaction-detail-css' => '7839ae2d',
-    'phabricator-app-buttons-css' => '230c5ef4',
+    'phabricator-app-buttons-css' => 'a567467a',
-    'phabricator-busy' => 'd223b82c',
+    'phabricator-busy' => 'a29ae2c4',
     'phabricator-content-source-view-css' => '47549184',
-    'phabricator-core-buttons-css' => '230c5ef4',
+    'phabricator-core-buttons-css' => 'a567467a',
-    'phabricator-core-css' => '230c5ef4',
+    'phabricator-core-css' => 'a567467a',
-    'phabricator-directory-css' => '230c5ef4',
+    'phabricator-directory-css' => 'a567467a',
     'phabricator-drag-and-drop-file-upload' => '7ecd31fa',
-    'phabricator-dropdown-menu' => 'd223b82c',
+    'phabricator-dropdown-menu' => 'a29ae2c4',
-    'phabricator-file-upload' => 'd223b82c',
+    'phabricator-file-upload' => 'a29ae2c4',
-    'phabricator-filetree-view-css' => '230c5ef4',
+    'phabricator-filetree-view-css' => 'a567467a',
-    'phabricator-flag-css' => '230c5ef4',
+    'phabricator-flag-css' => 'a567467a',
-    'phabricator-form-view-css' => '230c5ef4',
+    'phabricator-form-view-css' => 'a567467a',
-    'phabricator-header-view-css' => '230c5ef4',
+    'phabricator-header-view-css' => 'a567467a',
-    'phabricator-jump-nav' => '230c5ef4',
+    'phabricator-jump-nav' => 'a567467a',
-    'phabricator-keyboard-shortcut' => 'd223b82c',
+    'phabricator-keyboard-shortcut' => 'a29ae2c4',
-    'phabricator-keyboard-shortcut-manager' => 'd223b82c',
+    'phabricator-keyboard-shortcut-manager' => 'a29ae2c4',
-    'phabricator-main-menu-view' => '230c5ef4',
+    'phabricator-main-menu-view' => 'a567467a',
-    'phabricator-menu-item' => 'd223b82c',
+    'phabricator-menu-item' => 'a29ae2c4',
-    'phabricator-nav-view-css' => '230c5ef4',
+    'phabricator-nav-view-css' => 'a567467a',
-    'phabricator-notification' => 'd223b82c',
+    'phabricator-notification' => 'a29ae2c4',
-    'phabricator-notification-css' => '230c5ef4',
+    'phabricator-notification-css' => 'a567467a',
-    'phabricator-notification-menu-css' => '230c5ef4',
+    'phabricator-notification-menu-css' => 'a567467a',
     'phabricator-object-selector-css' => '47549184',
-    'phabricator-paste-file-upload' => 'd223b82c',
+    'phabricator-paste-file-upload' => 'a29ae2c4',
-    'phabricator-prefab' => 'd223b82c',
+    'phabricator-prefab' => 'a29ae2c4',
     'phabricator-project-tag-css' => '7839ae2d',
-    'phabricator-remarkup-css' => '230c5ef4',
+    'phabricator-remarkup-css' => 'a567467a',
     'phabricator-shaped-request' => '7ecd31fa',
-    'phabricator-standard-page-view' => '230c5ef4',
+    'phabricator-standard-page-view' => 'a567467a',
-    'phabricator-textareautils' => 'd223b82c',
+    'phabricator-textareautils' => 'a29ae2c4',
-    'phabricator-tooltip' => 'd223b82c',
+    'phabricator-tooltip' => 'a29ae2c4',
-    'phabricator-transaction-view-css' => '230c5ef4',
+    'phabricator-transaction-view-css' => 'a567467a',
-    'sprite-icon-css' => '230c5ef4',
+    'sprite-icon-css' => 'a567467a',
-    'syntax-highlighting-css' => '230c5ef4',
+    'syntax-highlighting-css' => 'a567467a',
   ),
 ));

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -76,6 +76,70 @@ final class CeleritySpriteGenerator {
     return $sheet;
   }
 
+  public function buildMenuSheet() {
+    $sprites = array();
+
+    $sources = array(
+      'round_bubble' => array(
+        'x' => 26,
+        'y' => 26,
+        'css' => '.phabricator-main-menu-alert-bubble'
+      ),
+      'bubble' => array(
+        'x' => 46,
+        'y' => 26,
+        'css' => '.phabricator-main-menu-alert-bubble.alert-unread'
+      ),
+      'seen_read_all' => array(
+        'x' => 14,
+        'y' => 14,
+        'css' =>
+          '.alert-notifications .phabricator-main-menu-alert-icon',
+      ),
+      'seen_have_unread' => array(
+        'x' => 14,
+        'y' => 14,
+        'css' =>
+          '.alert-notifications:hover .phabricator-main-menu-alert-icon',
+      ),
+      'unseen_any' => array(
+        'x' => 14,
+        'y' => 14,
+        'css' =>
+          '.alert-notifications.alert-unread .phabricator-main-menu-alert-icon',
+      ),
+    );
+
+    $scales = array(
+      '1x' => 1,
+      '2x' => 2,
+    );
+
+    $template = new PhutilSprite();
+    foreach ($sources as $name => $spec) {
+      $sprite = id(clone $template)
+        ->setName($name)
+        ->setSourceSize($spec['x'], $spec['y'])
+        ->setTargetCSS($spec['css']);
+
+      foreach ($scales as $scale_name => $scale) {
+        $path = 'notifications_'.$scale_name.'/'.$name.'.png';
+        $path = $this->getPath($path);
+
+        $sprite->setSourceFile($path, $scale);
+      }
+      $sprites[] = $sprite;
+    }
+
+    $sheet = $this->buildSheet('menu');
+    $sheet->setScales($scales);
+    foreach ($sprites as $sprite) {
+      $sheet->addSprite($sprite);
+    }
+
+    return $sheet;
+  }
+
   private function getPath($to_path = null) {
     $root = dirname(phutil_get_library_root('phabricator'));
     return $root.'/resources/sprite/'.$to_path;

src/view/page/menu/PhabricatorMainMenuView.php

@@ -66,56 +66,57 @@ final class PhabricatorMainMenuView extends AphrontView {
 
     require_celerity_resource('phabricator-notification-css');
     require_celerity_resource('phabricator-notification-menu-css');
+    require_celerity_resource('sprite-menu-css');
 
-    $indicator_id = celerity_generate_unique_node_id();
+    $count_id = celerity_generate_unique_node_id();
     $dropdown_id = celerity_generate_unique_node_id();
-    $menu_id = celerity_generate_unique_node_id();
+    $bubble_id = celerity_generate_unique_node_id();
 
-    $notification_count = id(new PhabricatorFeedStoryNotification())
+    $count_number = id(new PhabricatorFeedStoryNotification())
       ->countUnread($user);
 
-    $classes = array(
+    if ($count_number > 999) {
-      'phabricator-main-menu-alert-indicator',
+      $count_number = "\xE2\x88\x9E";
-    );
-    if ($notification_count) {
-      $classes[] = 'phabricator-main-menu-alert-indicator-unread';
     }
 
-    $notification_indicator = javelin_render_tag(
+    $count_tag = phutil_render_tag(
       'span',
       array(
-        'id' => $indicator_id,
+        'id'    => $count_id,
-        'class' => implode(' ', $classes),
+        'class' => 'phabricator-main-menu-alert-count'
       ),
-      $notification_count);
+      phutil_escape_html($count_number));
 
-    $classes = array();
+    $icon_tag = phutil_render_tag(
-    $classes[] = 'phabricator-main-menu-alert-item';
+      'span',
-    $classes[] = 'phabricator-main-menu-alert-item-notification';
+      array(
-    $classes[] = 'autosprite';
+        'class' => 'sprite-menu phabricator-main-menu-alert-icon',
-    $classes[] = 'main-menu-item-icon-notifications';
+      ),
+      '');
 
-    $notification_icon = javelin_render_tag(
+    $container_classes = array(
+      'phabricator-main-menu-alert-bubble',
+      'sprite-menu',
+      'alert-notifications',
+    );
+    if ($count_number) {
+      $container_classes[] = 'alert-unread';
+    }
+
+    $bubble_tag = phutil_render_tag(
       'a',
       array(
         'href'  => '/notification/',
-        'class' => implode(' ', $classes),
+        'class' => implode(' ', $container_classes),
-        'id'    => $menu_id,
+        'id'    => $bubble_id,
       ),
-      $notification_indicator);
+      $icon_tag.$count_tag);
-
-    $notification_menu = javelin_render_tag(
-      'div',
-      array(
-        'class' => 'phabricator-main-menu-alert',
-      ),
-      $notification_icon);
 
     Javelin::initBehavior(
       'aphlict-dropdown',
       array(
-        'menuID'      => $menu_id,
+        'bubbleID'    => $bubble_id,
-        'indicatorID' => $indicator_id,
+        'countID'     => $count_id,
         'dropdownID'  => $dropdown_id,
       ));
 
@@ -129,7 +130,7 @@ final class PhabricatorMainMenuView extends AphrontView {
       ),
       '');
 
-    return array($notification_menu, $notification_dropdown);
+    return array($bubble_tag, $notification_dropdown);
   }
 
 }

webroot/rsrc/css/application/base/main-menu-view.css

@@ -339,9 +339,36 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
 
 */
 
-.phabricator-main-menu-alert {
+.phabricator-main-menu-alert-bubble {
   display: inline-block;
   position: relative;
+  width: 26px;
+  height: 26px;
+  margin-bottom: 9px;
+}
+
+.phabricator-main-menu-alert-bubble.alert-unread {
+  width: 46px;
+}
+
+.phabricator-main-menu-alert-icon {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  top: 4px;
+  left: 5px;
+}
+
+.phabricator-main-menu-alert-count {
+  position: absolute;
+  font-weight: bold;
+  line-height: 22px;
+  top: 1px;
+  right: 8px;
+  left: 20px;
+  color: #ffffff;
+  text-align: center;
+  display: none;
 }
 
 .phabricator-main-menu-alert-item {
@@ -351,25 +378,6 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
   display: block;
 }
 
-.phabricator-main-menu-alert-indicator {
+.alert-unread .phabricator-main-menu-alert-count {
-  display: none;
-}
-
-.phabricator-main-menu-alert-indicator-unread {
-  position: absolute;
   display: block;
-
-  right: 0px;
-  top: 2px;
-  padding: 1px 4px 2px;
-
-  background: #dd3333;
-
-  border: 1px solid #aa0000;
-  font-size: 11px;
-
-  box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.5);
-  border-radius: 6px;
-  font-weight: bold;
-  color: #ffffff;
 }

webroot/rsrc/css/autosprite.css

@@ -44,424 +44,412 @@
   background-position: -248px 0px;
 }
 
-.main-menu-item-icon-notifications {
+.main-menu-item-icon-task {
   background-position: -279px 0px;
 }
 
-.main-menu-item-icon-notifications-selected {
+.main-menu-item-icon-task-selected {
   background-position: -310px 0px;
 }
 
-.main-menu-item-icon-notifications:hover {
+.main-menu-item-icon-task:hover {
   background-position: -341px 0px;
 }
 
-.main-menu-item-icon-task {
+.app-differential {
   background-position: -372px 0px;
 }
 
-.main-menu-item-icon-task-selected {
+.device-desktop  .app-differential:hover {
   background-position: -403px 0px;
 }
 
-.main-menu-item-icon-task:hover {
+.app-differential-selected {
   background-position: -434px 0px;
 }
 
-.app-differential {
+.app-fact {
   background-position: -465px 0px;
 }
 
-.device-desktop  .app-differential:hover {
+.device-desktop  .app-fact:hover {
   background-position: -496px 0px;
 }
 
-.app-differential-selected {
+.app-fact-selected {
   background-position: -527px 0px;
 }
 
-.app-fact {
+.app-mail {
   background-position: -558px 0px;
 }
 
-.device-desktop  .app-fact:hover {
+.device-desktop  .app-mail:hover {
   background-position: 0px -31px;
 }
 
-.app-fact-selected {
+.app-mail-selected {
   background-position: -31px -31px;
 }
 
-.app-mail {
+.app-diffusion {
   background-position: -62px -31px;
 }
 
-.device-desktop  .app-mail:hover {
+.device-desktop  .app-diffusion:hover {
   background-position: -93px -31px;
 }
 
-.app-mail-selected {
+.app-diffusion-selected {
   background-position: -124px -31px;
 }
 
-.app-diffusion {
+.app-slowvote {
   background-position: -155px -31px;
 }
 
-.device-desktop  .app-diffusion:hover {
+.device-desktop  .app-slowvote:hover {
   background-position: -186px -31px;
 }
 
-.app-diffusion-selected {
+.app-slowvote-selected {
   background-position: -217px -31px;
 }
 
-.app-slowvote {
+.app-phriction {
   background-position: -248px -31px;
 }
 
-.device-desktop  .app-slowvote:hover {
+.device-desktop  .app-phriction:hover {
   background-position: -279px -31px;
 }
 
-.app-slowvote-selected {
+.app-phriction-selected {
   background-position: -310px -31px;
 }
 
-.app-phriction {
+.app-maniphest {
   background-position: -341px -31px;
 }
 
-.device-desktop  .app-phriction:hover {
+.device-desktop  .app-maniphest:hover {
   background-position: -372px -31px;
 }
 
-.app-phriction-selected {
+.app-maniphest-selected {
   background-position: -403px -31px;
 }
 
-.app-maniphest {
+.app-flags {
   background-position: -434px -31px;
 }
 
-.device-desktop  .app-maniphest:hover {
+.device-desktop  .app-flags:hover {
   background-position: -465px -31px;
 }
 
-.app-maniphest-selected {
+.app-flags-selected {
   background-position: -496px -31px;
 }
 
-.app-flags {
+.app-settings {
   background-position: -527px -31px;
 }
 
-.device-desktop  .app-flags:hover {
+.device-desktop  .app-settings:hover {
   background-position: -558px -31px;
 }
 
-.app-flags-selected {
+.app-settings-selected {
   background-position: 0px -62px;
 }
 
-.app-settings {
+.app-applications {
   background-position: -31px -62px;
 }
 
-.device-desktop  .app-settings:hover {
+.device-desktop  .app-applications:hover {
   background-position: -62px -62px;
 }
 
-.app-settings-selected {
+.app-applications-selected {
   background-position: -93px -62px;
 }
 
-.app-applications {
+.app-default {
   background-position: -124px -62px;
 }
 
-.device-desktop  .app-applications:hover {
+.device-desktop  .app-default:hover {
   background-position: -155px -62px;
 }
 
-.app-applications-selected {
+.app-default-selected {
   background-position: -186px -62px;
 }
 
-.app-default {
+.app-people {
   background-position: -217px -62px;
 }
 
-.device-desktop  .app-default:hover {
+.device-desktop  .app-people:hover {
   background-position: -248px -62px;
 }
 
-.app-default-selected {
+.app-people-selected {
   background-position: -279px -62px;
 }
 
-.app-people {
+.app-ponder {
   background-position: -310px -62px;
 }
 
-.device-desktop  .app-people:hover {
+.device-desktop  .app-ponder:hover {
   background-position: -341px -62px;
 }
 
-.app-people-selected {
+.app-ponder-selected {
   background-position: -372px -62px;
 }
 
-.app-ponder {
+.app-calendar {
   background-position: -403px -62px;
 }
 
-.device-desktop  .app-ponder:hover {
+.device-desktop  .app-calendar:hover {
   background-position: -434px -62px;
 }
 
-.app-ponder-selected {
+.app-calendar-selected {
   background-position: -465px -62px;
 }
 
-.app-calendar {
+.app-files {
   background-position: -496px -62px;
 }
 
-.device-desktop  .app-calendar:hover {
+.device-desktop  .app-files:hover {
   background-position: -527px -62px;
 }
 
-.app-calendar-selected {
+.app-files-selected {
   background-position: -558px -62px;
 }
 
-.app-files {
+.app-projects {
   background-position: 0px -93px;
 }
 
-.device-desktop  .app-files:hover {
+.device-desktop  .app-projects:hover {
   background-position: -31px -93px;
 }
 
-.app-files-selected {
+.app-projects-selected {
   background-position: -62px -93px;
 }
 
-.app-projects {
+.app-daemons {
   background-position: -93px -93px;
 }
 
-.device-desktop  .app-projects:hover {
+.device-desktop  .app-daemons:hover {
   background-position: -124px -93px;
 }
 
-.app-projects-selected {
+.app-daemons-selected {
   background-position: -155px -93px;
 }
 
-.app-daemons {
+.app-herald {
   background-position: -186px -93px;
 }
 
-.device-desktop  .app-daemons:hover {
+.device-desktop  .app-herald:hover {
   background-position: -217px -93px;
 }
 
-.app-daemons-selected {
+.app-herald-selected {
   background-position: -248px -93px;
 }
 
-.app-herald {
+.app-countdown {
   background-position: -279px -93px;
 }
 
-.device-desktop  .app-herald:hover {
+.device-desktop  .app-countdown:hover {
   background-position: -310px -93px;
 }
 
-.app-herald-selected {
+.app-countdown-selected {
   background-position: -341px -93px;
 }
 
-.app-countdown {
+.app-conduit {
   background-position: -372px -93px;
 }
 
-.device-desktop  .app-countdown:hover {
+.device-desktop  .app-conduit:hover {
   background-position: -403px -93px;
 }
 
-.app-countdown-selected {
+.app-conduit-selected {
   background-position: -434px -93px;
 }
 
-.app-conduit {
+.app-feed {
   background-position: -465px -93px;
 }
 
-.device-desktop  .app-conduit:hover {
+.device-desktop  .app-feed:hover {
   background-position: -496px -93px;
 }
 
-.app-conduit-selected {
+.app-feed-selected {
   background-position: -527px -93px;
 }
 
-.app-feed {
+.app-paste {
-  background-position: -558px -93px;
-}
-
-.device-desktop  .app-feed:hover {
   background-position: 0px -124px;
 }
 
-.app-feed-selected {
+.device-desktop  .app-paste:hover {
   background-position: -31px -124px;
 }
 
-.app-paste {
+.app-paste-selected {
   background-position: -62px -124px;
 }
 
-.device-desktop  .app-paste:hover {
+.app-audit {
   background-position: -93px -124px;
 }
 
-.app-paste-selected {
+.device-desktop  .app-audit:hover {
   background-position: -124px -124px;
 }
 
-.app-audit {
+.app-audit-selected {
   background-position: -155px -124px;
 }
 
-.device-desktop  .app-audit:hover {
+.app-uiexample {
   background-position: -186px -124px;
 }
 
-.app-audit-selected {
+.device-desktop  .app-uiexample:hover {
   background-position: -217px -124px;
 }
 
-.app-uiexample {
+.app-uiexample-selected {
   background-position: -248px -124px;
 }
 
-.device-desktop  .app-uiexample:hover {
+.app-phpast {
   background-position: -279px -124px;
 }
 
-.app-uiexample-selected {
+.device-desktop  .app-phpast:hover {
   background-position: -310px -124px;
 }
 
-.app-phpast {
+.app-phpast-selected {
   background-position: -341px -124px;
 }
 
-.device-desktop  .app-phpast:hover {
+.app-owners {
   background-position: -372px -124px;
 }
 
-.app-phpast-selected {
+.device-desktop  .app-owners:hover {
   background-position: -403px -124px;
 }
 
-.app-owners {
+.app-owners-selected {
   background-position: -434px -124px;
 }
 
-.device-desktop  .app-owners:hover {
+.app-phid {
   background-position: -465px -124px;
 }
 
-.app-owners-selected {
+.device-desktop  .app-phid:hover {
   background-position: -496px -124px;
 }
 
-.app-phid {
+.app-phid-selected {
   background-position: -527px -124px;
 }
 
-.device-desktop  .app-phid:hover {
+.app-diviner {
-  background-position: -558px -124px;
-}
-
-.app-phid-selected {
   background-position: 0px -155px;
 }
 
-.app-diviner {
+.device-desktop  .app-diviner:hover {
   background-position: -31px -155px;
 }
 
-.device-desktop  .app-diviner:hover {
+.app-diviner-selected {
   background-position: -62px -155px;
 }
 
-.app-diviner-selected {
+.app-repositories {
   background-position: -93px -155px;
 }
 
-.app-repositories {
+.device-desktop  .app-repositories:hover {
   background-position: -124px -155px;
 }
 
-.device-desktop  .app-repositories:hover {
+.app-repositories-selected {
   background-position: -155px -155px;
 }
 
-.app-repositories-selected {
+.app-phame {
   background-position: -186px -155px;
 }
 
-.app-phame {
+.device-desktop  .app-phame:hover {
   background-position: -217px -155px;
 }
 
-.device-desktop  .app-phame:hover {
+.app-phame-selected {
   background-position: -248px -155px;
 }
 
-.app-phame-selected {
+.app-macro {
   background-position: -279px -155px;
 }
 
-.app-macro {
+.device-desktop  .app-macro:hover {
   background-position: -310px -155px;
 }
 
-.device-desktop  .app-macro:hover {
+.app-macro-selected {
   background-position: -341px -155px;
 }
 
-.app-macro-selected {
+.app-releeph {
   background-position: -372px -155px;
 }
 
-.app-releeph {
+.device-desktop  .app-releeph:hover {
   background-position: -403px -155px;
 }
 
-.device-desktop  .app-releeph:hover {
+.app-releeph-selected {
   background-position: -434px -155px;
 }
 
-.app-releeph-selected {
+.app-drydock {
   background-position: -465px -155px;
 }
 
-.app-drydock {
+.device-desktop  .app-drydock:hover {
   background-position: -496px -155px;
 }
 
-.device-desktop  .app-drydock:hover {
-  background-position: -527px -155px;
-}
-
 .app-drydock-selected {
-  background-position: -558px -155px;
+  background-position: -527px -155px;
 }
 
 .app-differential-large {

webroot/rsrc/css/sprite-menu.css

@@ -0,0 +1,38 @@
+/**
+ * @provides sprite-menu-css
+ * @generated
+ */
+
+.sprite-menu {
+  background-image: url(/rsrc/image/sprite-menu.png);
+  background-repeat: no-repeat;
+}
+
+@media
+only screen and (min-device-pixel-ratio: 1.5),
+only screen and (-webkit-min-device-pixel-ratio: 1.5) {
+  .sprite-menu {
+    background-image: url(/rsrc/image/sprite-menu-X2.png);
+    background-size: 47px 69px;
+  }
+}
+
+.alert-notifications .phabricator-main-menu-alert-icon {
+  background-position: 0px 0px;
+}
+
+.alert-notifications:hover .phabricator-main-menu-alert-icon {
+  background-position: -15px 0px;
+}
+
+.phabricator-main-menu-alert-bubble.alert-unread {
+  background-position: 0px -15px;
+}
+
+.phabricator-main-menu-alert-bubble {
+  background-position: 0px -42px;
+}
+
+.alert-notifications.alert-unread .phabricator-main-menu-alert-icon {
+  background-position: -27px -42px;
+}

webroot/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js

@@ -9,8 +9,8 @@
 
 JX.behavior('aphlict-dropdown', function(config) {
   var dropdown = JX.$(config.dropdownID);
-  var indicator = JX.$(config.indicatorID);
+  var count = JX.$(config.countID);
-  var menu = JX.$(config.menuID);
+  var bubble = JX.$(config.bubbleID);
   var visible = false;
   var request = null;
 
@@ -19,13 +19,15 @@ JX.behavior('aphlict-dropdown', function(config) {
       return;
     }
     request = new JX.Request('/notification/panel/', function(response) {
-      JX.DOM.setContent(indicator, response.number);
+      var display = (response.number > 999)
+        ? "\u221E"
+        : response.number;
+
+      JX.DOM.setContent(count, display);
       if (response.number == 0) {
-        JX.DOM.alterClass(indicator,
+        JX.DOM.alterClass(bubble, 'alert-unread', false);
-          "phabricator-main-menu-alert-indicator-unread", false);
       } else {
-        JX.DOM.alterClass(indicator,
+        JX.DOM.alterClass(bubble, 'alert-unread', true);
-          "phabricator-main-menu-alert-indicator-unread", true);
       }
       JX.DOM.setContent(dropdown, JX.$H(response.content));
       request = null;
@@ -33,8 +35,6 @@ JX.behavior('aphlict-dropdown', function(config) {
     request.send();
   }
 
-  refresh();
-
   JX.Stratcom.listen(
     'click',
     null,
@@ -50,14 +50,20 @@ JX.behavior('aphlict-dropdown', function(config) {
 
 
   JX.DOM.listen(
-    menu,
+    bubble,
     'click',
     null,
     function(e) {
+      if (!e.isNormalClick()) {
+        return;
+      }
+
       if (visible) {
         JX.DOM.hide(dropdown);
       } else {
-        var p = JX.$V(menu);
+        refresh();
+
+        var p = JX.$V(bubble);
         p.y = null;
         p.x -= 6;
         p.setPos(dropdown);