FontAwesome RemarkupBar

Summary:
Replaces the icons with fonts from FontAwesome. Up in the air about the meme icon. Thoughts?

Also removed the second fullscreen/normal state. Seems obvious what it does, but assume someone complained previously?

Test Plan:
Tested all the icon states and made sure they still worked. Test fullscreen and help.

{F163485}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -7,8 +7,8 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => 'baca3efb',
-    'core.pkg.js' => '29e9786d',
+    'core.pkg.css' => 'd9c53a92',
+    'core.pkg.js' => 'b6689fe1',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => '4a93db37',
     'differential.pkg.js' => 'eca39a2c',
@@ -105,7 +105,7 @@ return array(
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => '40151074',
-    'rsrc/css/core/remarkup.css' => '80c3a48c',
+    'rsrc/css/core/remarkup.css' => 'b510c359',
     'rsrc/css/core/syntax.css' => '3c18c1cb',
     'rsrc/css/core/z-index.css' => 'efb673ac',
     'rsrc/css/diviner/diviner-shared.css' => '38813222',
@@ -157,7 +157,6 @@ return array(
     'rsrc/css/sprite-minicons.css' => 'df4f76fe',
     'rsrc/css/sprite-payments.css' => 'cc085d44',
     'rsrc/css/sprite-projects.css' => '7578fa56',
-    'rsrc/css/sprite-remarkup.css' => '5c396a57',
     'rsrc/css/sprite-tokens.css' => '1706b943',
     'rsrc/externals/font/fontawesome/fontawesome-webfont.eot' => '1cab0752',
     'rsrc/externals/font/fontawesome/fontawesome-webfont.ttf' => '2ff84fd2',
@@ -324,8 +323,6 @@ return array(
     'rsrc/image/sprite-payments.png' => 'd8576309',
     'rsrc/image/sprite-projects-X2.png' => '218fdc8b',
     'rsrc/image/sprite-projects.png' => '631ff9a7',
-    'rsrc/image/sprite-remarkup-X2.png' => '7ee1dc28',
-    'rsrc/image/sprite-remarkup.png' => 'b4421f07',
     'rsrc/image/sprite-tokens-X2.png' => 'b4776580',
     'rsrc/image/sprite-tokens.png' => '25b75533',
     'rsrc/image/texture/card-gradient.png' => '815f26e8',
@@ -462,7 +459,7 @@ return array(
     'rsrc/js/core/behavior-object-selector.js' => 'e6f67523',
     'rsrc/js/core/behavior-oncopy.js' => 'c3e218fe',
     'rsrc/js/core/behavior-phabricator-nav.js' => 'b5842a5e',
-    'rsrc/js/core/behavior-phabricator-remarkup-assist.js' => 'ddee74db',
+    'rsrc/js/core/behavior-phabricator-remarkup-assist.js' => 'ba22863c',
     'rsrc/js/core/behavior-refresh-csrf.js' => '7814b593',
     'rsrc/js/core/behavior-remarkup-preview.js' => 'f7379f45',
     'rsrc/js/core/behavior-reorder-applications.js' => 'a8e3795d',
@@ -605,7 +602,7 @@ return array(
     'javelin-behavior-phabricator-notification-example' => 'c51a6616',
     'javelin-behavior-phabricator-object-selector' => 'e6f67523',
     'javelin-behavior-phabricator-oncopy' => 'c3e218fe',
-    'javelin-behavior-phabricator-remarkup-assist' => 'ddee74db',
+    'javelin-behavior-phabricator-remarkup-assist' => 'ba22863c',
     'javelin-behavior-phabricator-reveal-content' => '8f24abfc',
     'javelin-behavior-phabricator-search-typeahead' => '86549ee3',
     'javelin-behavior-phabricator-show-all-transactions' => '7c273581',
@@ -718,7 +715,7 @@ return array(
     'phabricator-prefab' => '41ed7994',
     'phabricator-profile-css' => '33e6f703',
     'phabricator-project-tag-css' => '095c9404',
-    'phabricator-remarkup-css' => '80c3a48c',
+    'phabricator-remarkup-css' => 'b510c359',
     'phabricator-search-results-css' => 'f240504c',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-side-menu-view-css' => 'a2ccd7bd',
@@ -806,7 +803,6 @@ return array(
     'sprite-minicons-css' => 'df4f76fe',
     'sprite-payments-css' => 'cc085d44',
     'sprite-projects-css' => '7578fa56',
-    'sprite-remarkup-css' => '5c396a57',
     'sprite-tokens-css' => '1706b943',
     'subscribers-list-css' => '5bb30c78',
     'syntax-highlighting-css' => '3c18c1cb',
@@ -1692,6 +1688,16 @@ return array(
       0 => 'javelin-install',
       1 => 'javelin-dom',
     ),
+    'ba22863c' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-stratcom',
+      2 => 'javelin-dom',
+      3 => 'phabricator-phtize',
+      4 => 'phabricator-textareautils',
+      5 => 'javelin-workflow',
+      6 => 'javelin-vector',
+    ),
     'bc75da74' =>
     array(
       0 => 'javelin-behavior',
@@ -1905,16 +1911,6 @@ return array(
       1 => 'javelin-dom',
       2 => 'phabricator-prefab',
     ),
-    'ddee74db' =>
-    array(
-      0 => 'javelin-behavior',
-      1 => 'javelin-stratcom',
-      2 => 'javelin-dom',
-      3 => 'phabricator-phtize',
-      4 => 'phabricator-textareautils',
-      5 => 'javelin-workflow',
-      6 => 'javelin-vector',
-    ),
     'e1ff79b1' =>
     array(
       0 => 'javelin-behavior',
@@ -2132,39 +2128,38 @@ return array(
       15 => 'aphront-tooltip-css',
       16 => 'phabricator-flag-css',
       17 => 'aphront-error-view-css',
-      18 => 'sprite-remarkup-css',
-      19 => 'sprite-gradient-css',
-      20 => 'sprite-menu-css',
-      21 => 'sprite-apps-css',
-      22 => 'sprite-apps-large-css',
-      23 => 'phabricator-main-menu-view',
-      24 => 'phabricator-notification-css',
-      25 => 'phabricator-notification-menu-css',
-      26 => 'lightbox-attachment-css',
-      27 => 'phui-header-view-css',
-      28 => 'phabricator-filetree-view-css',
-      29 => 'phabricator-nav-view-css',
-      30 => 'phabricator-side-menu-view-css',
-      31 => 'phabricator-crumbs-view-css',
-      32 => 'phui-object-item-list-view-css',
-      33 => 'global-drag-and-drop-css',
-      34 => 'phui-spacing-css',
-      35 => 'phui-form-css',
-      36 => 'phui-icon-view-css',
-      37 => 'phabricator-application-launch-view-css',
-      38 => 'phabricator-action-list-view-css',
-      39 => 'phui-property-list-view-css',
-      40 => 'phui-tag-view-css',
-      41 => 'phui-list-view-css',
-      42 => 'font-fontawesome',
-      43 => 'phui-font-icon-base-css',
-      44 => 'sprite-main-header-css',
-      45 => 'phui-box-css',
-      46 => 'phui-object-box-css',
-      47 => 'phui-timeline-view-css',
-      48 => 'sprite-tokens-css',
-      49 => 'tokens-css',
-      50 => 'phui-status-list-view-css',
+      18 => 'sprite-gradient-css',
+      19 => 'sprite-menu-css',
+      20 => 'sprite-apps-css',
+      21 => 'sprite-apps-large-css',
+      22 => 'phabricator-main-menu-view',
+      23 => 'phabricator-notification-css',
+      24 => 'phabricator-notification-menu-css',
+      25 => 'lightbox-attachment-css',
+      26 => 'phui-header-view-css',
+      27 => 'phabricator-filetree-view-css',
+      28 => 'phabricator-nav-view-css',
+      29 => 'phabricator-side-menu-view-css',
+      30 => 'phabricator-crumbs-view-css',
+      31 => 'phui-object-item-list-view-css',
+      32 => 'global-drag-and-drop-css',
+      33 => 'phui-spacing-css',
+      34 => 'phui-form-css',
+      35 => 'phui-icon-view-css',
+      36 => 'phabricator-application-launch-view-css',
+      37 => 'phabricator-action-list-view-css',
+      38 => 'phui-property-list-view-css',
+      39 => 'phui-tag-view-css',
+      40 => 'phui-list-view-css',
+      41 => 'font-fontawesome',
+      42 => 'phui-font-icon-base-css',
+      43 => 'sprite-main-header-css',
+      44 => 'phui-box-css',
+      45 => 'phui-object-box-css',
+      46 => 'phui-timeline-view-css',
+      47 => 'sprite-tokens-css',
+      48 => 'tokens-css',
+      49 => 'phui-status-list-view-css',
     ),
     'core.pkg.js' =>
     array(

resources/celerity/packages.php

@@ -91,7 +91,6 @@ return array(
     'phabricator-flag-css',
     'aphront-error-view-css',
 
-    'sprite-remarkup-css',
     'sprite-gradient-css',
     'sprite-menu-css',
     'sprite-apps-css',

resources/sprite/manifest/remarkup.json

@@ -1,91 +0,0 @@
-{
-  "version" : 1,
-  "sprites" : {
-    "remarkup-assist-none"                : {
-      "name" : "remarkup-assist-none",
-      "rule" : ".remarkup-assist-",
-      "hash" : "a7a394dbf21494f2279cc3d528aeb40b"
-    },
-    "remarkup-assist-text_b"              : {
-      "name" : "remarkup-assist-text_b",
-      "rule" : ".remarkup-assist-b",
-      "hash" : "ba8a8f8928f2f90e7acd024df8bdee3b"
-    },
-    "remarkup-assist-text_code"           : {
-      "name" : "remarkup-assist-text_code",
-      "rule" : ".remarkup-assist-code",
-      "hash" : "b8a03a1004074f0582e77eb4f916b00b"
-    },
-    "remarkup-assist-text_fullscreen"     : {
-      "name" : "remarkup-assist-text_fullscreen",
-      "rule" : ".remarkup-assist-fullscreen",
-      "hash" : "63254d9cbe6eadee87d1a28c1d246f9d"
-    },
-    "remarkup-assist-text_fullscreen_off" : {
-      "name" : "remarkup-assist-text_fullscreen_off",
-      "rule" : ".remarkup-control-fullscreen-mode .remarkup-assist-fullscreen",
-      "hash" : "cdcdca0556b6f16b0628684470fc1251"
-    },
-    "remarkup-assist-text_help"           : {
-      "name" : "remarkup-assist-text_help",
-      "rule" : ".remarkup-assist-help",
-      "hash" : "106f56bad2932f523cbf1a62ab12b681"
-    },
-    "remarkup-assist-text_i"              : {
-      "name" : "remarkup-assist-text_i",
-      "rule" : ".remarkup-assist-i",
-      "hash" : "d9b1a0629d40edd5d32d3e6e21ec1574"
-    },
-    "remarkup-assist-text_image"          : {
-      "name" : "remarkup-assist-text_image",
-      "rule" : ".remarkup-assist-image",
-      "hash" : "3e84bf38ccb50c9109dfd78b1711dbb6"
-    },
-    "remarkup-assist-text_larger"         : {
-      "name" : "remarkup-assist-text_larger",
-      "rule" : ".remarkup-assist-larger",
-      "hash" : "05909067a2513b9b664b313974643ce3"
-    },
-    "remarkup-assist-text_link"           : {
-      "name" : "remarkup-assist-text_link",
-      "rule" : ".remarkup-assist-link",
-      "hash" : "3a6575ca85ddfaa63103d5a8ab80fc09"
-    },
-    "remarkup-assist-text_meme"           : {
-      "name" : "remarkup-assist-text_meme",
-      "rule" : ".remarkup-assist-meme",
-      "hash" : "3fa5e69cfc12cd5eba038b48f1efb6c5"
-    },
-    "remarkup-assist-text_ol"             : {
-      "name" : "remarkup-assist-text_ol",
-      "rule" : ".remarkup-assist-ol",
-      "hash" : "b1964f62cb2c3cd6ed12bb04522a22c7"
-    },
-    "remarkup-assist-text_table"          : {
-      "name" : "remarkup-assist-text_table",
-      "rule" : ".remarkup-assist-table",
-      "hash" : "95fffc501412b323fbdccc98f5bb595c"
-    },
-    "remarkup-assist-text_tag"            : {
-      "name" : "remarkup-assist-text_tag",
-      "rule" : ".remarkup-assist-tag",
-      "hash" : "49ed577b1081dd44f60325795468c8ad"
-    },
-    "remarkup-assist-text_tt"             : {
-      "name" : "remarkup-assist-text_tt",
-      "rule" : ".remarkup-assist-tt",
-      "hash" : "3c8753b5df23a2a48348cb4ef86b3c02"
-    },
-    "remarkup-assist-text_ul"             : {
-      "name" : "remarkup-assist-text_ul",
-      "rule" : ".remarkup-assist-ul",
-      "hash" : "6b1add427c45ed676b9b7f220f16513a"
-    }
-  },
-  "scales"  : [
-    1,
-    2
-  ],
-  "header"  : "\/**\n * @provides sprite-remarkup-css\n * @generated\n *\/\n\n.sprite-remarkup {\n  background-image: url(\/rsrc\/image\/sprite-remarkup.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-remarkup {\n    background-image: url(\/rsrc\/image\/sprite-remarkup-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(
-  'remarkup' => $generator->buildRemarkupSheet(),
   'menu' => $generator->buildMenuSheet(),
   'apps' => $generator->buildAppsSheet(),
   'minicons' => $generator->buildMiniconsSheet(),

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -2,50 +2,6 @@
 
 final class CeleritySpriteGenerator {
 
-  public function buildRemarkupSheet() {
-
-    $scales = array(
-      '1x'  => 1,
-      '2x'  => 2,
-    );
-    $sprites = array();
-
-    $template = id(new PhutilSprite())
-      ->setSourceSize(14, 14);
-
-    $remarkup_icons = $this->getDirectoryList('remarkup_1x');
-    foreach ($remarkup_icons as $icon) {
-      $prefix = 'remarkup_';
-
-      // Strip 'text_' from these file names.
-      $class_name = substr($icon, 5);
-
-      if ($class_name == 'fullscreen_off') {
-        $tcss = '.remarkup-control-fullscreen-mode .remarkup-assist-fullscreen';
-      } else {
-        $tcss = '.remarkup-assist-'.$class_name;
-      }
-
-      $sprite = id(clone $template)
-        ->setName('remarkup-assist-'.$icon)
-        ->setTargetCSS($tcss);
-
-      foreach ($scales as $scale_key => $scale) {
-        $path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
-        $sprite->setSourceFile($path, $scale);
-      }
-      $sprites[] = $sprite;
-    }
-
-    $sheet = $this->buildSheet('remarkup', true);
-    $sheet->setScales($scales);
-    foreach ($sprites as $sprite) {
-      $sheet->addSprite($sprite);
-    }
-
-    return $sheet;
-  }
-
   public function buildMiniconsSheet() {
     $icons = $this->getDirectoryList('minicons_white_1x');
 

src/view/form/control/PhabricatorRemarkupControl.php

@@ -43,34 +43,34 @@ final class PhabricatorRemarkupControl extends AphrontFormTextAreaControl {
     Javelin::initBehavior('phabricator-tooltips', array());
 
     $actions = array(
-      'b'     => array(
+      'fa-bold' => array(
         'tip' => pht('Bold'),
       ),
-      'i'     => array(
+      'fa-italic' => array(
         'tip' => pht('Italics'),
       ),
-      'tt'    => array(
+      'fa-text-width' => array(
         'tip' => pht('Monospaced'),
       ),
-      'link'  => array(
+      'fa-link' => array(
         'tip' => pht('Link'),
       ),
       array(
         'spacer' => true,
       ),
-      'ul' => array(
+      'fa-list-ul' => array(
         'tip' => pht('Bulleted List'),
       ),
-      'ol' => array(
+      'fa-list-ol' => array(
         'tip' => pht('Numbered List'),
       ),
-      'code' => array(
+      'fa-code' => array(
         'tip' => pht('Code Block'),
       ),
-      'table' => array(
+      'fa-table' => array(
         'tip' => pht('Table'),
       ),
-      'image' => array(
+      'fa-cloud-upload' => array(
         'tip' => pht('Upload File'),
       ),
     );
@@ -79,12 +79,12 @@ final class PhabricatorRemarkupControl extends AphrontFormTextAreaControl {
       $actions[] = array(
         'spacer' => true,
         );
-      $actions['meme'] = array(
+      $actions['fa-meh-o'] = array(
         'tip' => pht('Meme'),
       );
     }
 
-    $actions['help'] = array(
+    $actions['fa-life-bouy'] = array(
         'tip' => pht('Help'),
         'align' => 'right',
         'href'  => PhabricatorEnv::getDoclink('Remarkup Reference'),
@@ -95,7 +95,7 @@ final class PhabricatorRemarkupControl extends AphrontFormTextAreaControl {
       'align' => 'right',
     );
 
-    $actions['fullscreen'] = array(
+    $actions['fa-arrows-alt'] = array(
       'tip' => pht('Fullscreen Mode'),
       'align' => 'right',
     );
@@ -146,9 +146,6 @@ final class PhabricatorRemarkupControl extends AphrontFormTextAreaControl {
           $tip);
       }
 
-      require_celerity_resource('sprite-remarkup-css');
-
-
       $buttons[] = javelin_tag(
         'a',
         array(
@@ -164,7 +161,7 @@ final class PhabricatorRemarkupControl extends AphrontFormTextAreaControl {
           'div',
           array(
             'class' =>
-              'remarkup-assist sprite-remarkup remarkup-assist-'.$action,
+              'remarkup-assist phui-icon-view phui-font-fa bluegrey '.$action,
           ),
           $content));
     }

webroot/rsrc/css/core/remarkup.css

@@ -314,7 +314,7 @@
   border-left-color: {$blueborder};
   border-right-color: {$blueborder};
   border-bottom-color: {$blueborder};
-  border-top-color: {$lightblueborder};
+  border-top-color: {$thinblueborder};
   border-radius: 0;
 
   /* Prevent Safari and Chrome users from dragging the textarea any wider,
@@ -327,9 +327,7 @@
 }
 
 .remarkup-assist-bar {
-  height: 27px;
-  padding: 0 2px;
-
+  height: 26px;
   border-width: 1px 1px 0;
   border-style: solid;
   border-top-color: {$blueborder};
@@ -342,24 +340,20 @@
 
 .remarkup-assist-button {
   display: block;
-  padding: 3px;
-  margin: 2px 1px;
+  padding: 5px;
   float: left;
-
-  border: 1px solid transparent;
-  border-radius: 2px;
 }
 
 .remarkup-assist-button:hover {
-  background: #f7f7f7;
-  border-color: #c6c6c6;
-  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.10);
+  background-color: rgba(100,100,100,.15);
+}
+
+.remarkup-assist-button:hover .phui-icon-view.phui-font-fa {
+  color: {$darkbluetext};
 }
 
 .remarkup-assist-button:active {
   outline: none;
-  background: #f3f3f3;
-  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.10);
 }
 
 .remarkup-assist-button:focus {
@@ -392,10 +386,11 @@
 }
 
 .remarkup-assist {
-  display: block;
   width: 14px;
   height: 14px;
   overflow: hidden;
+  text-align: center;
+  vertical-align: middle;
 }
 
 .remarkup-assist-right {
@@ -422,7 +417,7 @@
 
 .remarkup-control-fullscreen-mode textarea.remarkup-assist-textarea {
   position: absolute;
-  top: 26px;
+  top: 27px;
   left: 0;
   right: 0;
   bottom: 0;

webroot/rsrc/css/sprite-remarkup.css

@@ -1,83 +0,0 @@
-/**
- * @provides sprite-remarkup-css
- * @generated
- */
-
-.sprite-remarkup {
-  background-image: url(/rsrc/image/sprite-remarkup.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-remarkup {
-    background-image: url(/rsrc/image/sprite-remarkup-X2.png);
-    background-size: 60px 60px;
-  }
-}
-
-
-.remarkup-assist- {
-  background-position: 0px 0px;
-}
-
-.remarkup-assist-b {
-  background-position: -15px 0px;
-}
-
-.remarkup-assist-code {
-  background-position: -30px 0px;
-}
-
-.remarkup-assist-fullscreen {
-  background-position: -45px 0px;
-}
-
-.remarkup-control-fullscreen-mode .remarkup-assist-fullscreen {
-  background-position: 0px -15px;
-}
-
-.remarkup-assist-help {
-  background-position: -15px -15px;
-}
-
-.remarkup-assist-i {
-  background-position: -30px -15px;
-}
-
-.remarkup-assist-image {
-  background-position: -45px -15px;
-}
-
-.remarkup-assist-larger {
-  background-position: 0px -30px;
-}
-
-.remarkup-assist-link {
-  background-position: -15px -30px;
-}
-
-.remarkup-assist-meme {
-  background-position: -30px -30px;
-}
-
-.remarkup-assist-ol {
-  background-position: -45px -30px;
-}
-
-.remarkup-assist-table {
-  background-position: 0px -45px;
-}
-
-.remarkup-assist-tag {
-  background-position: -15px -45px;
-}
-
-.remarkup-assist-tt {
-  background-position: -30px -45px;
-}
-
-.remarkup-assist-ul {
-  background-position: -45px -45px;
-}

webroot/rsrc/js/core/behavior-phabricator-remarkup-assist.js

@@ -22,7 +22,7 @@ JX.behavior('phabricator-remarkup-assist', function(config) {
 
     // First, disable any active mode.
     if (edit_root) {
-      if (edit_mode == 'fullscreen') {
+      if (edit_mode == 'fa-arrows-alt') {
         JX.DOM.alterClass(edit_root, 'remarkup-control-fullscreen-mode', false);
         JX.DOM.alterClass(document.body, 'remarkup-fullscreen-mode', false);
       }
@@ -33,7 +33,7 @@ JX.behavior('phabricator-remarkup-assist', function(config) {
     edit_mode = mode;
 
     // Now, apply the new mode.
-    if (mode == 'fullscreen') {
+    if (mode == 'fa-arrows-alt') {
       JX.DOM.alterClass(edit_root, 'remarkup-control-fullscreen-mode', true);
       JX.DOM.alterClass(document.body, 'remarkup-fullscreen-mode', true);
       resizearea();
@@ -46,7 +46,7 @@ JX.behavior('phabricator-remarkup-assist', function(config) {
     if (!edit_root) {
       return;
     }
-    if (edit_mode != 'fullscreen') {
+    if (edit_mode != 'fa-arrows-alt') {
       return;
     }
 
@@ -71,7 +71,7 @@ JX.behavior('phabricator-remarkup-assist', function(config) {
       return;
     }
 
-    if (edit_mode != 'fullscreen') {
+    if (edit_mode != 'fa-arrows-alt') {
       return;
     }
 
@@ -101,13 +101,13 @@ JX.behavior('phabricator-remarkup-assist', function(config) {
     var r = JX.TextAreaUtils.getSelectionRange(area);
 
     switch (action) {
-      case 'b':
+      case 'fa-bold':
         update(area, '**', sel || pht('bold text'), '**');
         break;
-      case 'i':
+      case 'fa-italic':
         update(area, '//', sel || pht('italic text'), '//');
         break;
-      case 'link':
+      case 'fa-link':
         var name = pht('name');
         if (/^https?:/i.test(sel)) {
           update(area, '[[ ' + sel + ' | ', name, ' ]]');
@@ -115,12 +115,12 @@ JX.behavior('phabricator-remarkup-assist', function(config) {
           update(area, '[[ ', pht('URL'), ' | ' + (sel || name) + ' ]]');
         }
         break;
-      case 'tt':
+      case 'fa-text-width':
         update(area, '`', sel || pht('monospaced text'), '`');
         break;
-      case 'ul':
-      case 'ol':
-        var ch = (action == 'ol') ? '  # ' : '  - ';
+      case 'fa-list-ul':
+      case 'fa-list-ol':
+        var ch = (action == 'fa-list-ol') ? '  # ' : '  - ';
         if (sel) {
           sel = sel.split("\n");
         } else {
@@ -129,16 +129,16 @@ JX.behavior('phabricator-remarkup-assist', function(config) {
         sel = sel.join("\n" + ch);
         update(area, ((r.start === 0) ? "" : "\n\n") + ch, sel, "\n\n");
         break;
-      case 'code':
+      case 'fa-code':
         sel = sel || "foreach ($list as $item) {\n  work_miracles($item);\n}";
         var prefix = (r.start === 0) ? "" : "\n";
         update(area, prefix + "```\n", sel, "\n```");
         break;
-      case 'table':
+      case 'fa-table':
         var prefix = (r.start === 0 ? '' : '\n\n');
         update(area, prefix + '| ', sel || pht('data'), ' |');
         break;
-      case 'meme':
+      case 'fa-meh-o':
         new JX.Workflow('/macro/meme/create/')
           .setHandler(function(response) {
             update(
@@ -149,14 +149,14 @@ JX.behavior('phabricator-remarkup-assist', function(config) {
           })
           .start();
         break;
-      case 'image':
+      case 'fa-cloud-upload':
         new JX.Workflow('/file/uploaddialog/').start();
         break;
-      case 'fullscreen':
-        if (edit_mode == 'fullscreen') {
+      case 'fa-arrows-alt':
+        if (edit_mode == 'fa-arrows-alt') {
           set_edit_mode(root, 'normal');
         } else {
-          set_edit_mode(root, 'fullscreen');
+          set_edit_mode(root, 'fa-arrows-alt');
         }
         break;
     }