Update Phabricator logo

Summary:
This updates the eye logo and removes the formal wordmark "Phabricator" as an image. Instead we'll use the new updated eye logo and plain text for "Phabricator", both of which are more friendly and less industrial.

Installs that already use the `header-logo` customization setting will need to rebuild their logo to 80px x 80px. They will then also get to use plain text to whitebox their install as they see fit.

Test Plan:
Tested new logo at desktop, tablet, and mobile sizes. Set a random instance name, saw new wordmark. Created a really long wordmark of MMMMMMMMMMMM, saw text cut off so UI doesn't break. May need some additional tweaking, but I think we covered the most edge cases here.

{F1751791, size=full}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: edibiase, bjshively, yelirekim, Korvin

Maniphest Tasks: T4214, T11096

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '90c46327',
+    'core.pkg.css' => 'f12c7d47',
     'core.pkg.js' => 'b562c3db',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '3fb7f532',
@@ -32,7 +32,7 @@ return array(
     'rsrc/css/aphront/typeahead.css' => 'd4f16145',
     'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af',
     'rsrc/css/application/auth/auth.css' => '0877ed6e',
-    'rsrc/css/application/base/main-menu-view.css' => 'b623169f',
+    'rsrc/css/application/base/main-menu-view.css' => 'a79b6e52',
     'rsrc/css/application/base/notification-menu.css' => 'f31c0bde',
     'rsrc/css/application/base/phabricator-application-launch-view.css' => '95351601',
     'rsrc/css/application/base/phui-theme.css' => '027ba77e',
@@ -163,7 +163,6 @@ return array(
     'rsrc/css/phui/workboards/phui-workcard.css' => '0c62d7c5',
     'rsrc/css/phui/workboards/phui-workpanel.css' => '92197373',
     'rsrc/css/sprite-login.css' => '60e8560e',
-    'rsrc/css/sprite-menu.css' => '9dd65b92',
     'rsrc/css/sprite-tokens.css' => '9cdfd599',
     'rsrc/css/syntax/syntax-default.css' => '9923583c',
     'rsrc/externals/d3/d3.min.js' => 'a11a5ff2',
@@ -320,6 +319,7 @@ return array(
     'rsrc/image/icon/tango/upload.png' => '7bbb7984',
     'rsrc/image/icon/unsubscribe.png' => '25725013',
     'rsrc/image/lightblue-header.png' => '5c168b6d',
+    'rsrc/image/logo/light-eye.png' => 'fcd66408',
     'rsrc/image/main_texture.png' => '29a2c5ad',
     'rsrc/image/menu_texture.png' => '5a17580d',
     'rsrc/image/people/harding.png' => '45aa614e',
@@ -343,8 +343,6 @@ return array(
     'rsrc/image/resize.png' => 'fd476de4',
     'rsrc/image/sprite-login-X2.png' => 'e3991e37',
     'rsrc/image/sprite-login.png' => '03d5af29',
-    'rsrc/image/sprite-menu-X2.png' => 'cfd8fca5',
-    'rsrc/image/sprite-menu.png' => 'd7a99faa',
     'rsrc/image/sprite-tokens-X2.png' => '804a5232',
     'rsrc/image/sprite-tokens.png' => 'b41d03da',
     'rsrc/image/texture/card-gradient.png' => '815f26e8',
@@ -785,7 +783,7 @@ return array(
     'phabricator-flag-css' => '5337623f',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => '4a021c10',
-    'phabricator-main-menu-view' => 'b623169f',
+    'phabricator-main-menu-view' => 'a79b6e52',
     'phabricator-nav-view-css' => '09f3d0db',
     'phabricator-notification' => 'ccf1cbf8',
     'phabricator-notification-css' => '3f6c89c9',
@@ -891,7 +889,6 @@ return array(
     'releeph-request-typeahead-css' => '667a48ae',
     'setup-issue-css' => 'db7e9c40',
     'sprite-login-css' => '60e8560e',
-    'sprite-menu-css' => '9dd65b92',
     'sprite-tokens-css' => '9cdfd599',
     'syntax-default-css' => '9923583c',
     'syntax-highlighting-css' => '769d3498',
@@ -1724,6 +1721,9 @@ return array(
       'javelin-stratcom',
       'javelin-dom',
     ),
+    'a79b6e52' => array(
+      'phui-theme-css',
+    ),
     'a80d0378' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1844,9 +1844,6 @@ return array(
       'javelin-dom',
       'javelin-util',
     ),
-    'b623169f' => array(
-      'phui-theme-css',
-    ),
     'b6993408' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -2246,7 +2243,6 @@ return array(
       'aphront-tooltip-css',
       'phabricator-flag-css',
       'phui-info-view-css',
-      'sprite-menu-css',
       'phabricator-main-menu-view',
       'phabricator-notification-css',
       'phabricator-notification-menu-css',

resources/celerity/packages.php

@@ -104,7 +104,6 @@ return array(
     'aphront-tooltip-css',
     'phabricator-flag-css',
     'phui-info-view-css',
-    'sprite-menu-css',
 
     'phabricator-main-menu-view',
     'phabricator-notification-css',

resources/sprite/manifest/menu.json

@@ -1,31 +0,0 @@
-{
-  "version": 1,
-  "sprites": {
-    "dark-eye": {
-      "name": "dark-eye",
-      "rule": ".dark-eye",
-      "hash": "c8112e52666fa1cb509ebb2cdf3a3df5"
-    },
-    "dark-logo": {
-      "name": "dark-logo",
-      "rule": ".dark-logo",
-      "hash": "e3425da87e8f6737d8db0063d064cd7d"
-    },
-    "light-eye": {
-      "name": "light-eye",
-      "rule": ".light-eye",
-      "hash": "5b6bf7c8c10d4f7414d976f6e79ae2ff"
-    },
-    "light-logo": {
-      "name": "light-logo",
-      "rule": ".light-logo",
-      "hash": "bee37c0a86825ec7ded38936b1ba7b65"
-    }
-  },
-  "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),\nonly screen and (min-resolution: 1.5dppx) {\n  .sprite-menu {\n    background-image: url(\/rsrc\/image\/sprite-menu-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}\n",
-  "type": "standard"
-}

scripts/celerity/generate_sprites.php

@@ -27,7 +27,6 @@ $webroot = Filesystem::readablePath($webroot);
 $generator = new CeleritySpriteGenerator();
 
 $sheets = array(
-  'menu' => $generator->buildMenuSheet(),
   'tokens' => $generator->buildTokenSheet(),
   'login' => $generator->buildLoginSheet(),
 );

src/applications/celerity/CeleritySpriteGenerator.php

@@ -2,58 +2,6 @@
 
 final class CeleritySpriteGenerator extends Phobject {
 
-  public function buildMenuSheet() {
-    $sprites = array();
-
-    $colors = array(
-      'dark',
-      'light',
-    );
-
-    $sources = array();
-    foreach ($colors as $color) {
-      $sources[$color.'-logo'] = array(
-        'x' => 96,
-        'y' => 40,
-        'css' => '.'.$color.'-logo',
-      );
-      $sources[$color.'-eye'] = array(
-        'x' => 40,
-        'y' => 40,
-        'css' => '.'.$color.'-eye',
-      );
-    }
-
-    $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 = 'menu_'.$scale_name.'/'.$name.'.png';
-        $path = $this->getPath($path);
-
-        $sprite->setSourceFile($path, $scale);
-      }
-      $sprites[] = $sprite;
-    }
-
-    $sheet = $this->buildSheet('menu', true);
-    $sheet->setScales($scales);
-    foreach ($sprites as $sprite) {
-      $sheet->addSprite($sprite);
-    }
-
-    return $sheet;
-  }
-
   public function buildTokenSheet() {
     $icons = $this->getDirectoryList('tokens_1x');
     $scales = array(

src/applications/config/option/PhabricatorUIConfigOptions.php

@@ -69,6 +69,14 @@ EOJSON;
             "    omit this if you just want a piece of text, like a copyright ".
             "    notice."))
         ->addExample($example, pht('Basic Example')),
+      $this->newOption('ui.custom-wordmark', 'string', array())
+        ->setSummary(
+          pht(
+            'Customize the text next to the logo.'))
+        ->setDescription(
+          pht(
+            "Allows you to change the text (Phabricator by default) ".
+            "next to the Phabricator logo.\n\n")),
       $this->newOption(
         'ui.custom-header',
         'custom:PhabricatorCustomHeaderConfigType',
@@ -80,7 +88,7 @@ EOJSON;
               'phid for a viewable image you have uploaded to Phabricator '.
               'via the [[ /file/ | Files application]]. This image should '.
               'be:'."\n".
-              ' - 192px X 80px; while not enforced, images with these '.
+              ' - 80px X 80px; while not enforced, images with these '.
               'dimensions will look best across devices.'."\n".
               ' - have view policy public if [[ '.
               '/config/edit/policy.allow-public | `policy.allow-public`]] '.

src/view/page/menu/PhabricatorMainMenuView.php

@@ -298,7 +298,9 @@ final class PhabricatorMainMenuView extends AphrontView {
 
   private function renderPhabricatorLogo() {
     $style_logo = null;
+    $logo = null;
     $custom_header = PhabricatorEnv::getEnvConfig('ui.custom-header');
+    $custom_wordmark = PhabricatorEnv::getEnvConfig('ui.custom-wordmark');
     if ($custom_header) {
       $cache = PhabricatorCaches::getImmutableCache();
       $cache_key_logo = 'ui.custom-header.logo-phid.v1.'.$custom_header;
@@ -315,17 +317,27 @@ final class PhabricatorMainMenuView extends AphrontView {
       }
       if ($logo_uri) {
         $style_logo =
-          'background-size: 96px 40px; '.
+          'background-size: 40px 40px; '.
           'background-position: 0px 0px; '.
           'background-image: url('.$logo_uri.');';
       }
+
+      $logo = phutil_tag(
+        'span',
+        array(
+          'class' => 'phabricator-main-menu-logo',
+          'style' => $style_logo,
+        ),
+        '');
     }
 
-    $color = PhabricatorEnv::getEnvConfig('ui.header-color');
+    if (!$logo) {
-    if ($color == 'light') {
+      $logo = phutil_tag(
-      $color = 'dark';
+        'span',
-    } else {
+        array(
-      $color = 'light';
+          'class' => 'phabricator-wordmark',
+        ),
+        (($custom_wordmark) ? $custom_wordmark : pht('Phabricator')));
     }
 
     return phutil_tag(
@@ -344,16 +356,10 @@ final class PhabricatorMainMenuView extends AphrontView {
         phutil_tag(
           'span',
           array(
-            'class' => 'sprite-menu phabricator-main-menu-eye '.$color.'-eye',
+            'class' => 'phabricator-main-menu-eye',
-          ),
-          ''),
-          phutil_tag(
-          'span',
-          array(
-            'class' => 'sprite-menu phabricator-main-menu-logo '.$color.'-logo',
-            'style' => $style_logo,
           ),
           ''),
+          $logo,
       ));
   }
 

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

@@ -41,27 +41,20 @@
 }
 
 .phabricator-main-menu-brand {
-  display: inline-block;
-  width: 148px;
   height: 44px;
   float: left;
-  margin-right: 4px;
+  margin-right: 6px;
   padding-left: 6px;
 }
 
-.phabricator-main-menu-logo {
-  position: absolute;
-  width: 96px;
-  height: 40px;
-  left: 52px;
-  top: 2px;
-}
-
 .phabricator-main-menu-eye {
-  position: absolute;
+  margin: 2px 0;
   width: 40px;
   height: 40px;
-  top: 2px;
+  float: left;
+  display: block;
+  background-image: url(/rsrc/image/logo/light-eye.png);
+  background-size: 40px 40px;
 }
 
 .device-desktop .phabricator-main-menu-brand:hover {
@@ -69,6 +62,20 @@
   cursor: hand;
 }
 
+.device-phone .phabricator-wordmark {
+  max-width: 112px; /* iPhone 5 limitation */
+}
+
+.phabricator-wordmark {
+  float: left;
+  color: #fff;
+  font-size: 18px;
+  margin: 9px 4px 9px 6px;
+  padding-right: 8px;
+  max-width: 175px;
+  overflow: hidden;
+}
+
 /* - Expand/Collapse Button ----------------------------------------------------
 
   On phones, the menu switches to a vertical layout and uses a button to expand

webroot/rsrc/css/sprite-menu.css

@@ -1,36 +0,0 @@
-/**
- * @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),
-only screen and (min-resolution: 1.5dppx) {
-  .sprite-menu {
-    background-image: url(/rsrc/image/sprite-menu-X2.png);
-    background-size: 97px 123px;
-  }
-}
-
-
-.dark-logo {
-  background-position: 0px 0px;
-}
-
-.dark-eye {
-  background-position: 0px -82px;
-}
-
-.light-logo {
-  background-position: 0px -41px;
-}
-
-.light-eye {
-  background-position: -41px -82px;
-}