JX.Favicon for Conpherence

Summary: I think maybe these should be more separate from JX.Title, but seems to work ok. May build new favicons just for messages though. Proof of concept UI.

Test Plan: Send message on one browser, see red icon in other browser. Click on menu, count and favicon switch back to normal.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -10,7 +10,7 @@ return array(
     'conpherence.pkg.css' => 'cea72e09',
     'conpherence.pkg.js' => '6249a1cf',
     'core.pkg.css' => '46d588e4',
-    'core.pkg.js' => '2d9fc958',
+    'core.pkg.js' => '035325a7',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'e1d704ce',
     'differential.pkg.js' => '634399e9',
@@ -273,30 +273,13 @@ return array(
     'rsrc/favicons/apple-touch-icon-60x60.png' => '8ff52925',
     'rsrc/favicons/apple-touch-icon-72x72.png' => 'a2bb65d6',
     'rsrc/favicons/apple-touch-icon-76x76.png' => '2d061a11',
-    'rsrc/favicons/dark/apple-touch-icon-114x114.png' => 'd0c8978c',
-    'rsrc/favicons/dark/apple-touch-icon-120x120.png' => '3a618bc0',
-    'rsrc/favicons/dark/apple-touch-icon-144x144.png' => '92c1e188',
-    'rsrc/favicons/dark/apple-touch-icon-152x152.png' => '7ce7e469',
-    'rsrc/favicons/dark/apple-touch-icon-57x57.png' => 'e3f3f38b',
-    'rsrc/favicons/dark/apple-touch-icon-60x60.png' => '1e0dcc72',
-    'rsrc/favicons/dark/apple-touch-icon-72x72.png' => '7fb599b6',
-    'rsrc/favicons/dark/apple-touch-icon-76x76.png' => '91146961',
-    'rsrc/favicons/dark/favicon-128.png' => 'd6ac4346',
-    'rsrc/favicons/dark/favicon-16x16.png' => '17434bb0',
-    'rsrc/favicons/dark/favicon-196x196.png' => '5e06ee72',
-    'rsrc/favicons/dark/favicon-32x32.png' => 'bdd7e16b',
-    'rsrc/favicons/dark/favicon-96x96.png' => '0cf55978',
-    'rsrc/favicons/dark/favicon.ico' => '4343aaa6',
-    'rsrc/favicons/dark/mstile-144x144.png' => '4dc9d42d',
-    'rsrc/favicons/dark/mstile-150x150.png' => '2dc61c90',
-    'rsrc/favicons/dark/mstile-310x150.png' => '4fe58ab2',
-    'rsrc/favicons/dark/mstile-310x310.png' => 'e62c1677',
-    'rsrc/favicons/dark/mstile-70x70.png' => '6d1f41b7',
     'rsrc/favicons/favicon-128.png' => '72f7e812',
     'rsrc/favicons/favicon-16x16.png' => 'fc6275ba',
     'rsrc/favicons/favicon-196x196.png' => '95db275e',
     'rsrc/favicons/favicon-32x32.png' => '5bd18b6c',
     'rsrc/favicons/favicon-96x96.png' => '7242c8e9',
+    'rsrc/favicons/favicon-mention.ico' => '1fdd0fa4',
+    'rsrc/favicons/favicon-message.ico' => '115bc010',
     'rsrc/favicons/favicon.ico' => 'cdb11121',
     'rsrc/favicons/mask-icon.svg' => 'e132a80f',
     'rsrc/favicons/mstile-144x144.png' => '310c2ee5',
@@ -304,44 +287,6 @@ return array(
     'rsrc/favicons/mstile-310x150.png' => '4a49d3ee',
     'rsrc/favicons/mstile-310x310.png' => 'a52ab264',
     'rsrc/favicons/mstile-70x70.png' => '5edce7b8',
-    'rsrc/favicons/red/apple-touch-icon-114x114.png' => '91e37d1d',
-    'rsrc/favicons/red/apple-touch-icon-120x120.png' => '66687533',
-    'rsrc/favicons/red/apple-touch-icon-144x144.png' => 'bc06002c',
-    'rsrc/favicons/red/apple-touch-icon-152x152.png' => 'a713de42',
-    'rsrc/favicons/red/apple-touch-icon-57x57.png' => '4729688b',
-    'rsrc/favicons/red/apple-touch-icon-60x60.png' => '07b9b609',
-    'rsrc/favicons/red/apple-touch-icon-72x72.png' => 'b20c3698',
-    'rsrc/favicons/red/apple-touch-icon-76x76.png' => 'c6e7dd5c',
-    'rsrc/favicons/red/favicon-128.png' => 'e2b2f8fe',
-    'rsrc/favicons/red/favicon-16x16.png' => '929fbceb',
-    'rsrc/favicons/red/favicon-196x196.png' => '94c089a5',
-    'rsrc/favicons/red/favicon-32x32.png' => '5848673e',
-    'rsrc/favicons/red/favicon-96x96.png' => '895d54e8',
-    'rsrc/favicons/red/favicon.ico' => '25172b6b',
-    'rsrc/favicons/red/mstile-144x144.png' => '448639f5',
-    'rsrc/favicons/red/mstile-150x150.png' => 'c2ba45d0',
-    'rsrc/favicons/red/mstile-310x150.png' => 'b0e50799',
-    'rsrc/favicons/red/mstile-310x310.png' => '2475c5a5',
-    'rsrc/favicons/red/mstile-70x70.png' => '49b197e8',
-    'rsrc/favicons/yellow/apple-touch-icon-114x114.png' => '5271fb3f',
-    'rsrc/favicons/yellow/apple-touch-icon-120x120.png' => '6c3d9bf9',
-    'rsrc/favicons/yellow/apple-touch-icon-144x144.png' => '6484472c',
-    'rsrc/favicons/yellow/apple-touch-icon-152x152.png' => 'e305dda8',
-    'rsrc/favicons/yellow/apple-touch-icon-57x57.png' => 'fa6c43d4',
-    'rsrc/favicons/yellow/apple-touch-icon-60x60.png' => '2673f162',
-    'rsrc/favicons/yellow/apple-touch-icon-72x72.png' => '3ad8020c',
-    'rsrc/favicons/yellow/apple-touch-icon-76x76.png' => '58cffd81',
-    'rsrc/favicons/yellow/favicon-128.png' => '3b2f8233',
-    'rsrc/favicons/yellow/favicon-16x16.png' => 'f3a90518',
-    'rsrc/favicons/yellow/favicon-196x196.png' => '932c7c65',
-    'rsrc/favicons/yellow/favicon-32x32.png' => '005c9f92',
-    'rsrc/favicons/yellow/favicon-96x96.png' => '3ad9bfa9',
-    'rsrc/favicons/yellow/favicon.ico' => '2f5b2991',
-    'rsrc/favicons/yellow/mstile-144x144.png' => 'fc52335c',
-    'rsrc/favicons/yellow/mstile-150x150.png' => '9e556f80',
-    'rsrc/favicons/yellow/mstile-310x150.png' => '2c915073',
-    'rsrc/favicons/yellow/mstile-310x310.png' => 'ee49978d',
-    'rsrc/favicons/yellow/mstile-70x70.png' => '85c7c939',
     'rsrc/image/BFCFDA.png' => 'd5ec91f4',
     'rsrc/image/actions/edit.png' => '2fc41442',
     'rsrc/image/avatar.png' => 'e132bb6a',
@@ -430,7 +375,7 @@ return array(
     'rsrc/image/texture/table_header_hover.png' => '038ec3b9',
     'rsrc/image/texture/table_header_tall.png' => 'd56b434f',
     'rsrc/js/application/aphlict/Aphlict.js' => '5359e785',
-    'rsrc/js/application/aphlict/behavior-aphlict-dropdown.js' => '49e20786',
+    'rsrc/js/application/aphlict/behavior-aphlict-dropdown.js' => '2a171a9d',
     'rsrc/js/application/aphlict/behavior-aphlict-listen.js' => 'fb20ac8d',
     'rsrc/js/application/aphlict/behavior-aphlict-status.js' => '5e2634b9',
     'rsrc/js/application/aphlict/behavior-desktop-notifications-control.js' => 'edd1ba66',
@@ -535,6 +480,7 @@ return array(
     'rsrc/js/core/Busy.js' => '59a7976a',
     'rsrc/js/core/DragAndDropFileUpload.js' => '58dea2fa',
     'rsrc/js/core/DraggableList.js' => '5a13c79f',
+    'rsrc/js/core/Favicon.js' => '1fe2510c',
     'rsrc/js/core/FileUpload.js' => '680ea2c8',
     'rsrc/js/core/Hovercard.js' => '1bd28176',
     'rsrc/js/core/KeyboardShortcut.js' => '1ae869f2',
@@ -544,7 +490,7 @@ return array(
     'rsrc/js/core/Prefab.js' => 'cfd23f37',
     'rsrc/js/core/ShapedRequest.js' => '7cbe244b',
     'rsrc/js/core/TextAreaUtils.js' => '320810c8',
-    'rsrc/js/core/Title.js' => 'df5e11d2',
+    'rsrc/js/core/Title.js' => '485aaa6c',
     'rsrc/js/core/ToolTip.js' => '6323f942',
     'rsrc/js/core/behavior-active-nav.js' => 'e379b58e',
     'rsrc/js/core/behavior-audio-source.js' => '59b251eb',
@@ -653,7 +599,7 @@ return array(
     'inline-comment-summary-css' => '51efda3a',
     'javelin-aphlict' => '5359e785',
     'javelin-behavior' => '61cbc29a',
-    'javelin-behavior-aphlict-dropdown' => '49e20786',
+    'javelin-behavior-aphlict-dropdown' => '2a171a9d',
     'javelin-behavior-aphlict-listen' => 'fb20ac8d',
     'javelin-behavior-aphlict-status' => '5e2634b9',
     'javelin-behavior-aphront-basic-tokenizer' => 'b3a4b884',
@@ -851,6 +797,7 @@ return array(
     'phabricator-drag-and-drop-file-upload' => '58dea2fa',
     'phabricator-draggable-list' => '5a13c79f',
     'phabricator-fatal-config-template-css' => '8f18fa41',
+    'phabricator-favicon' => '1fe2510c',
     'phabricator-feed-css' => 'ecd4ec57',
     'phabricator-file-upload' => '680ea2c8',
     'phabricator-filetree-view-css' => 'fccf9f82',
@@ -872,7 +819,7 @@ return array(
     'phabricator-source-code-view-css' => 'cbeef983',
     'phabricator-standard-page-view' => '79176f5a',
     'phabricator-textareautils' => '320810c8',
-    'phabricator-title' => 'df5e11d2',
+    'phabricator-title' => '485aaa6c',
     'phabricator-tooltip' => '6323f942',
     'phabricator-ui-example-css' => '528b19de',
     'phabricator-uiexample-javelin-view' => 'd4a14807',
@@ -1144,6 +1091,10 @@ return array(
       'javelin-uri',
       'javelin-routable',
     ),
+    '1fe2510c' => array(
+      'javelin-install',
+      'javelin-dom',
+    ),
     '21df4ff5' => array(
       'javelin-install',
       'javelin-workboard-card',
@@ -1163,6 +1114,17 @@ return array(
       'javelin-install',
       'javelin-util',
     ),
+    '2a171a9d' => array(
+      'javelin-behavior',
+      'javelin-request',
+      'javelin-stratcom',
+      'javelin-vector',
+      'javelin-dom',
+      'javelin-uri',
+      'javelin-behavior-device',
+      'phabricator-title',
+      'phabricator-favicon',
+    ),
     '2b8de964' => array(
       'javelin-install',
       'javelin-util',
@@ -1282,6 +1244,9 @@ return array(
       'phabricator-drag-and-drop-file-upload',
       'phabricator-textareautils',
     ),
+    '485aaa6c' => array(
+      'javelin-install',
+    ),
     '491416b3' => array(
       'javelin-behavior',
       'javelin-uri',
@@ -1292,16 +1257,6 @@ return array(
       'javelin-dom',
       'javelin-stratcom',
     ),
-    '49e20786' => array(
-      'javelin-behavior',
-      'javelin-request',
-      'javelin-stratcom',
-      'javelin-vector',
-      'javelin-dom',
-      'javelin-uri',
-      'javelin-behavior-device',
-      'phabricator-title',
-    ),
     '4a021c10' => array(
       'javelin-install',
       'javelin-util',
@@ -2097,9 +2052,6 @@ return array(
       'javelin-typeahead-ondemand-source',
       'javelin-dom',
     ),
-    'df5e11d2' => array(
-      'javelin-install',
-    ),
     'e0ec7f2f' => array(
       'javelin-behavior',
       'javelin-dom',

src/view/page/PhabricatorBarePageView.php

@@ -111,11 +111,13 @@ class PhabricatorBarePageView extends AphrontPageView {
           '/rsrc/favicons/apple-touch-icon-152x152.png'),
       ));
 
-    $apple_tag = phutil_tag(
-      'meta',
+    $favicon_tag = phutil_tag(
+      'link',
       array(
-        'name' => 'apple-mobile-web-app-status-bar-style',
-        'content' => 'black-translucent',
+        'id' => 'favicon',
+        'rel' => 'shortcut icon',
+        'href' => celerity_get_resource_uri(
+          '/rsrc/favicons/favicon.ico'),
       ));
 
     $referrer_tag = phutil_tag(
@@ -146,7 +148,7 @@ class PhabricatorBarePageView extends AphrontPageView {
       $icon_tag_76,
       $icon_tag_120,
       $icon_tag_152,
-      $apple_tag,
+      $favicon_tag,
       $referrer_tag,
       CelerityStaticResourceResponse::renderInlineScript(
         $framebust.jsprintf('window.__DEV__=%d;', ($developer ? 1 : 0))),

src/view/page/menu/PhabricatorMainMenuView.php

@@ -23,6 +23,17 @@ final class PhabricatorMainMenuView extends AphrontView {
     return $this->controller;
   }
 
+  private function getFaviconURI($type = null) {
+    switch ($type) {
+      case 'message':
+        return celerity_get_resource_uri('/rsrc/favicons/favicon-message.ico');
+      case 'mention':
+        return celerity_get_resource_uri('/rsrc/favicons/favicon-mention.ico');
+      default:
+        return celerity_get_resource_uri('/rsrc/favicons/favicon.ico');
+    }
+  }
+
   public function render() {
     $viewer = $this->getViewer();
 
@@ -440,6 +451,9 @@ final class PhabricatorMainMenuView extends AphrontView {
           'countType'   => $conpherence_data['countType'],
           'countNumber' => $message_count_number,
           'unreadClass' => 'message-unread',
+          'favicon'     => $this->getFaviconURI('default'),
+          'message_favicon' => $this->getFaviconURI('message'),
+          'mention_favicon' => $this->getFaviconURI('mention'),
         ));
 
       $message_notification_dropdown = javelin_tag(
@@ -518,6 +532,9 @@ final class PhabricatorMainMenuView extends AphrontView {
           'countType'   => $notification_data['countType'],
           'countNumber' => $count_number,
           'unreadClass' => 'alert-unread',
+          'favicon'     => $this->getFaviconURI('default'),
+          'message_favicon' => $this->getFaviconURI('message'),
+          'mention_favicon' => $this->getFaviconURI('mention'),
         ));
 
       $notification_dropdown = javelin_tag(
@@ -600,6 +617,9 @@ final class PhabricatorMainMenuView extends AphrontView {
             'countType'   => null,
             'countNumber' => null,
             'unreadClass' => 'setup-unread',
+            'favicon'     => $this->getFaviconURI('default'),
+            'message_favicon' => $this->getFaviconURI('message'),
+            'mention_favicon' => $this->getFaviconURI('mention'),
           ));
 
         $setup_notification_dropdown = javelin_tag(

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

@@ -8,6 +8,7 @@
  *           javelin-uri
  *           javelin-behavior-device
  *           phabricator-title
+ *           phabricator-favicon
  */
 
 JX.behavior('aphlict-dropdown', function(config, statics) {
@@ -17,6 +18,8 @@ JX.behavior('aphlict-dropdown', function(config, statics) {
   var dropdown = JX.$(config.dropdownID);
   var bubble = JX.$(config.bubbleID);
   var icon = JX.DOM.scry(bubble, 'span', 'menu-icon')[0];
+  var favicon = config.favicon;
+  var message_favicon = config.message_favicon;
 
   var count;
   if (config.countID) {
@@ -26,13 +29,23 @@ JX.behavior('aphlict-dropdown', function(config, statics) {
   var request = null;
   var dirty = config.local ? false : true;
 
+  function _updateFavicon(new_count) {
+    if ((config.countType == 'messages') && (new_count)) {
+      JX.Favicon.setFavicon(message_favicon);
+    } else if (config.countType == 'messages') {
+      JX.Favicon.setFavicon(favicon);
+    }
+  }
+
   if (config.countType) {
     JX.Title.setCount(config.countType, config.countNumber);
+    _updateFavicon(config.countNumber);
   }
 
   function _updateCount(number) {
     if (config.countType) {
       JX.Title.setCount(config.countType, number);
+      _updateFavicon(number);
     } else {
       return;
     }

webroot/rsrc/js/core/Favicon.js

@@ -0,0 +1,35 @@
+/**
+ * @provides phabricator-favicon
+ * @requires javelin-install
+ *           javelin-dom
+ */
+JX.install('Favicon', {
+  statics: {
+    _favicon: null,
+
+    setFavicon: function(favicon) {
+      var self = JX.Favicon;
+      self._favicon = favicon;
+      self._update();
+    },
+
+    _update: function() {
+      var self = JX.Favicon;
+      var cur_favicon = JX.$('favicon');
+
+      if (self._favicon === null) {
+        self._favicon = cur_favicon.href;
+      }
+
+      var new_favicon = JX.$N(
+        'link',
+        {href: self._favicon,
+           id: 'favicon',
+          rel: 'shortcut icon',
+        });
+
+      JX.DOM.replace(cur_favicon, new_favicon);
+
+    }
+  }
+});

webroot/rsrc/js/core/Title.js

@@ -1,7 +1,6 @@
 /**
- * @requires javelin-install
  * @provides phabricator-title
- * @javelin
+ * @requires javelin-install
  */
 
 /**
@@ -44,6 +43,7 @@ JX.install('Title', {
       }
 
       document.title = title;
+
     }
   }
 });