From e5af167ec99cdb29fcb3bb44e44c5afd3d0c6d7e Mon Sep 17 00:00:00 2001 From: epriestley Date: Sat, 20 Apr 2013 07:53:04 -0700 Subject: [PATCH] Cleanup chaos/order modes for Firefox Summary: - Moves z-index rules to z-index CSS. - Fixes Order mode in Firefox with JS. ;_; Test Plan: Used Order mode in FF, Safari, Chrome. Reviewers: AnhNhan, chad, btrahan Reviewed By: chad CC: aran Differential Revision: https://secure.phabricator.com/D5740 --- src/__celerity_resource_map__.php | 159 +++++++++--------- .../pholio/pholio-inline-comments.css | 1 - .../rsrc/css/application/pholio/pholio.css | 1 - webroot/rsrc/css/core/remarkup.css | 8 +- webroot/rsrc/css/core/z-index.css | 12 ++ .../behavior-phabricator-remarkup-assist.js | 39 ++++- 6 files changed, 130 insertions(+), 90 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index aac03d8f70..cc27ea066f 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -1992,7 +1992,7 @@ celerity_register_resource_map(array( ), 'javelin-behavior-phabricator-remarkup-assist' => array( - 'uri' => '/res/ebc88729/rsrc/js/application/core/behavior-phabricator-remarkup-assist.js', + 'uri' => '/res/6ce662a8/rsrc/js/application/core/behavior-phabricator-remarkup-assist.js', 'type' => 'js', 'requires' => array( @@ -2002,6 +2002,7 @@ celerity_register_resource_map(array( 3 => 'phabricator-textareautils', 4 => 'javelin-workflow', 5 => 'phabricator-notification', + 6 => 'javelin-vector', ), 'disk' => '/rsrc/js/application/core/behavior-phabricator-remarkup-assist.js', ), @@ -3242,7 +3243,7 @@ celerity_register_resource_map(array( ), 'phabricator-remarkup-css' => array( - 'uri' => '/res/adef7cfa/rsrc/css/core/remarkup.css', + 'uri' => '/res/b4682067/rsrc/css/core/remarkup.css', 'type' => 'css', 'requires' => array( @@ -3536,7 +3537,7 @@ celerity_register_resource_map(array( ), 'phabricator-zindex-css' => array( - 'uri' => '/res/5a43594e/rsrc/css/core/z-index.css', + 'uri' => '/res/d4048e34/rsrc/css/core/z-index.css', 'type' => 'css', 'requires' => array( @@ -3554,7 +3555,7 @@ celerity_register_resource_map(array( ), 'pholio-css' => array( - 'uri' => '/res/b03fae38/rsrc/css/application/pholio/pholio.css', + 'uri' => '/res/0daaf1ca/rsrc/css/application/pholio/pholio.css', 'type' => 'css', 'requires' => array( @@ -3563,7 +3564,7 @@ celerity_register_resource_map(array( ), 'pholio-inline-comments-css' => array( - 'uri' => '/res/8fe0edc7/rsrc/css/application/pholio/pholio-inline-comments.css', + 'uri' => '/res/006fc575/rsrc/css/application/pholio/pholio-inline-comments.css', 'type' => 'css', 'requires' => array( @@ -3924,7 +3925,7 @@ celerity_register_resource_map(array( ), array( 'packages' => array( - '53664e83' => + '1847d825' => array( 'name' => 'core.pkg.css', 'symbols' => @@ -3966,10 +3967,10 @@ celerity_register_resource_map(array( 34 => 'phabricator-object-item-list-view-css', 35 => 'global-drag-and-drop-css', ), - 'uri' => '/res/pkg/53664e83/core.pkg.css', + 'uri' => '/res/pkg/1847d825/core.pkg.css', 'type' => 'css', ), - '5c3b10c8' => + '4cebeb73' => array( 'name' => 'core.pkg.js', 'symbols' => @@ -4009,7 +4010,7 @@ celerity_register_resource_map(array( 32 => 'javelin-behavior-global-drag-and-drop', 33 => 'javelin-behavior-phabricator-reveal-content', ), - 'uri' => '/res/pkg/5c3b10c8/core.pkg.js', + 'uri' => '/res/pkg/4cebeb73/core.pkg.js', 'type' => 'js', ), 'e208b108' => @@ -4156,16 +4157,16 @@ celerity_register_resource_map(array( 'reverse' => array( 'aphront-attached-file-view-css' => '6b1fccc6', - 'aphront-dialog-view-css' => '53664e83', - 'aphront-error-view-css' => '53664e83', - 'aphront-form-view-css' => '53664e83', - 'aphront-list-filter-view-css' => '53664e83', - 'aphront-pager-view-css' => '53664e83', - 'aphront-panel-view-css' => '53664e83', - 'aphront-table-view-css' => '53664e83', - 'aphront-tokenizer-control-css' => '53664e83', - 'aphront-tooltip-css' => '53664e83', - 'aphront-typeahead-control-css' => '53664e83', + 'aphront-dialog-view-css' => '1847d825', + 'aphront-error-view-css' => '1847d825', + 'aphront-form-view-css' => '1847d825', + 'aphront-list-filter-view-css' => '1847d825', + 'aphront-pager-view-css' => '1847d825', + 'aphront-panel-view-css' => '1847d825', + 'aphront-table-view-css' => '1847d825', + 'aphront-tokenizer-control-css' => '1847d825', + 'aphront-tooltip-css' => '1847d825', + 'aphront-typeahead-control-css' => '1847d825', 'differential-changeset-view-css' => '8aaacd1b', 'differential-core-view-css' => '8aaacd1b', 'differential-inline-comment-editor' => 'e96b08f8', @@ -4179,19 +4180,19 @@ celerity_register_resource_map(array( 'differential-table-of-contents-css' => '8aaacd1b', 'diffusion-commit-view-css' => 'c8ce2d88', 'diffusion-icons-css' => 'c8ce2d88', - 'global-drag-and-drop-css' => '53664e83', + 'global-drag-and-drop-css' => '1847d825', 'inline-comment-summary-css' => '8aaacd1b', - 'javelin-aphlict' => '5c3b10c8', + 'javelin-aphlict' => '4cebeb73', 'javelin-behavior' => '41f3916d', - 'javelin-behavior-aphlict-dropdown' => '5c3b10c8', - 'javelin-behavior-aphlict-listen' => '5c3b10c8', - 'javelin-behavior-aphront-basic-tokenizer' => '5c3b10c8', + 'javelin-behavior-aphlict-dropdown' => '4cebeb73', + 'javelin-behavior-aphlict-listen' => '4cebeb73', + 'javelin-behavior-aphront-basic-tokenizer' => '4cebeb73', 'javelin-behavior-aphront-drag-and-drop' => 'e96b08f8', 'javelin-behavior-aphront-drag-and-drop-textarea' => 'e96b08f8', - 'javelin-behavior-aphront-form-disable-on-submit' => '5c3b10c8', + 'javelin-behavior-aphront-form-disable-on-submit' => '4cebeb73', 'javelin-behavior-audit-preview' => 'f96657b8', 'javelin-behavior-dark-console' => 'e208b108', - 'javelin-behavior-device' => '5c3b10c8', + 'javelin-behavior-device' => '4cebeb73', 'javelin-behavior-differential-accept-with-errors' => 'e96b08f8', 'javelin-behavior-differential-add-reviewers-and-ccs' => 'e96b08f8', 'javelin-behavior-differential-comment-jump' => 'e96b08f8', @@ -4207,32 +4208,32 @@ celerity_register_resource_map(array( 'javelin-behavior-diffusion-commit-graph' => 'f96657b8', 'javelin-behavior-diffusion-pull-lastmodified' => 'f96657b8', 'javelin-behavior-error-log' => 'e208b108', - 'javelin-behavior-global-drag-and-drop' => '5c3b10c8', - 'javelin-behavior-history-install' => '5c3b10c8', - 'javelin-behavior-konami' => '5c3b10c8', - 'javelin-behavior-lightbox-attachments' => '5c3b10c8', + 'javelin-behavior-global-drag-and-drop' => '4cebeb73', + 'javelin-behavior-history-install' => '4cebeb73', + 'javelin-behavior-konami' => '4cebeb73', + 'javelin-behavior-lightbox-attachments' => '4cebeb73', 'javelin-behavior-load-blame' => 'e96b08f8', 'javelin-behavior-maniphest-batch-selector' => 'f85eb6d8', 'javelin-behavior-maniphest-subpriority-editor' => 'f85eb6d8', 'javelin-behavior-maniphest-transaction-controls' => 'f85eb6d8', 'javelin-behavior-maniphest-transaction-expand' => 'f85eb6d8', 'javelin-behavior-maniphest-transaction-preview' => 'f85eb6d8', - 'javelin-behavior-phabricator-active-nav' => '5c3b10c8', - 'javelin-behavior-phabricator-autofocus' => '5c3b10c8', - 'javelin-behavior-phabricator-gesture' => '5c3b10c8', - 'javelin-behavior-phabricator-keyboard-shortcuts' => '5c3b10c8', - 'javelin-behavior-phabricator-nav' => '5c3b10c8', + 'javelin-behavior-phabricator-active-nav' => '4cebeb73', + 'javelin-behavior-phabricator-autofocus' => '4cebeb73', + 'javelin-behavior-phabricator-gesture' => '4cebeb73', + 'javelin-behavior-phabricator-keyboard-shortcuts' => '4cebeb73', + 'javelin-behavior-phabricator-nav' => '4cebeb73', 'javelin-behavior-phabricator-object-selector' => 'e96b08f8', - 'javelin-behavior-phabricator-oncopy' => '5c3b10c8', - 'javelin-behavior-phabricator-remarkup-assist' => '5c3b10c8', - 'javelin-behavior-phabricator-reveal-content' => '5c3b10c8', - 'javelin-behavior-phabricator-search-typeahead' => '5c3b10c8', - 'javelin-behavior-phabricator-tooltips' => '5c3b10c8', - 'javelin-behavior-phabricator-watch-anchor' => '5c3b10c8', - 'javelin-behavior-refresh-csrf' => '5c3b10c8', + 'javelin-behavior-phabricator-oncopy' => '4cebeb73', + 'javelin-behavior-phabricator-remarkup-assist' => '4cebeb73', + 'javelin-behavior-phabricator-reveal-content' => '4cebeb73', + 'javelin-behavior-phabricator-search-typeahead' => '4cebeb73', + 'javelin-behavior-phabricator-tooltips' => '4cebeb73', + 'javelin-behavior-phabricator-watch-anchor' => '4cebeb73', + 'javelin-behavior-refresh-csrf' => '4cebeb73', 'javelin-behavior-repository-crossreference' => 'e96b08f8', - 'javelin-behavior-toggle-class' => '5c3b10c8', - 'javelin-behavior-workflow' => '5c3b10c8', + 'javelin-behavior-toggle-class' => '4cebeb73', + 'javelin-behavior-workflow' => '4cebeb73', 'javelin-dom' => '41f3916d', 'javelin-event' => '41f3916d', 'javelin-install' => '41f3916d', @@ -4251,47 +4252,47 @@ celerity_register_resource_map(array( 'javelin-util' => '41f3916d', 'javelin-vector' => '41f3916d', 'javelin-workflow' => '41f3916d', - 'lightbox-attachment-css' => '53664e83', + 'lightbox-attachment-css' => '1847d825', 'maniphest-task-summary-css' => '6b1fccc6', 'maniphest-transaction-detail-css' => '6b1fccc6', - 'phabricator-busy' => '5c3b10c8', + 'phabricator-busy' => '4cebeb73', 'phabricator-content-source-view-css' => '8aaacd1b', - 'phabricator-core-buttons-css' => '53664e83', - 'phabricator-core-css' => '53664e83', - 'phabricator-crumbs-view-css' => '53664e83', - 'phabricator-directory-css' => '53664e83', + 'phabricator-core-buttons-css' => '1847d825', + 'phabricator-core-css' => '1847d825', + 'phabricator-crumbs-view-css' => '1847d825', + 'phabricator-directory-css' => '1847d825', 'phabricator-drag-and-drop-file-upload' => 'e96b08f8', - 'phabricator-dropdown-menu' => '5c3b10c8', - 'phabricator-file-upload' => '5c3b10c8', - 'phabricator-filetree-view-css' => '53664e83', - 'phabricator-flag-css' => '53664e83', - 'phabricator-form-view-css' => '53664e83', - 'phabricator-header-view-css' => '53664e83', - 'phabricator-jump-nav' => '53664e83', - 'phabricator-keyboard-shortcut' => '5c3b10c8', - 'phabricator-keyboard-shortcut-manager' => '5c3b10c8', - 'phabricator-main-menu-view' => '53664e83', - 'phabricator-menu-item' => '5c3b10c8', - 'phabricator-nav-view-css' => '53664e83', - 'phabricator-notification' => '5c3b10c8', - 'phabricator-notification-css' => '53664e83', - 'phabricator-notification-menu-css' => '53664e83', - 'phabricator-object-item-list-view-css' => '53664e83', + 'phabricator-dropdown-menu' => '4cebeb73', + 'phabricator-file-upload' => '4cebeb73', + 'phabricator-filetree-view-css' => '1847d825', + 'phabricator-flag-css' => '1847d825', + 'phabricator-form-view-css' => '1847d825', + 'phabricator-header-view-css' => '1847d825', + 'phabricator-jump-nav' => '1847d825', + 'phabricator-keyboard-shortcut' => '4cebeb73', + 'phabricator-keyboard-shortcut-manager' => '4cebeb73', + 'phabricator-main-menu-view' => '1847d825', + 'phabricator-menu-item' => '4cebeb73', + 'phabricator-nav-view-css' => '1847d825', + 'phabricator-notification' => '4cebeb73', + 'phabricator-notification-css' => '1847d825', + 'phabricator-notification-menu-css' => '1847d825', + 'phabricator-object-item-list-view-css' => '1847d825', 'phabricator-object-selector-css' => '8aaacd1b', - 'phabricator-prefab' => '5c3b10c8', + 'phabricator-prefab' => '4cebeb73', 'phabricator-project-tag-css' => '6b1fccc6', - 'phabricator-remarkup-css' => '53664e83', + 'phabricator-remarkup-css' => '1847d825', 'phabricator-shaped-request' => 'e96b08f8', - 'phabricator-side-menu-view-css' => '53664e83', - 'phabricator-standard-page-view' => '53664e83', - 'phabricator-textareautils' => '5c3b10c8', - 'phabricator-tooltip' => '5c3b10c8', - 'phabricator-transaction-view-css' => '53664e83', - 'phabricator-zindex-css' => '53664e83', - 'sprite-apps-large-css' => '53664e83', - 'sprite-gradient-css' => '53664e83', - 'sprite-icon-css' => '53664e83', - 'sprite-menu-css' => '53664e83', - 'syntax-highlighting-css' => '53664e83', + 'phabricator-side-menu-view-css' => '1847d825', + 'phabricator-standard-page-view' => '1847d825', + 'phabricator-textareautils' => '4cebeb73', + 'phabricator-tooltip' => '4cebeb73', + 'phabricator-transaction-view-css' => '1847d825', + 'phabricator-zindex-css' => '1847d825', + 'sprite-apps-large-css' => '1847d825', + 'sprite-gradient-css' => '1847d825', + 'sprite-icon-css' => '1847d825', + 'sprite-menu-css' => '1847d825', + 'syntax-highlighting-css' => '1847d825', ), )); diff --git a/webroot/rsrc/css/application/pholio/pholio-inline-comments.css b/webroot/rsrc/css/application/pholio/pholio-inline-comments.css index f4281b26a7..caec948f62 100644 --- a/webroot/rsrc/css/application/pholio/pholio-inline-comments.css +++ b/webroot/rsrc/css/application/pholio/pholio-inline-comments.css @@ -56,7 +56,6 @@ position: absolute; border: 1px solid #000; background: rgb(60, 60, 60); - z-index: 100; padding: 8px 10px 8px 12px; width: 260px; box-shadow: 0 2px 10px 1px #999; diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css index c623bc1abf..430f1a211e 100644 --- a/webroot/rsrc/css/application/pholio/pholio.css +++ b/webroot/rsrc/css/application/pholio/pholio.css @@ -134,7 +134,6 @@ .pholio-device-lightbox { position: absolute; overflow: auto; - z-index: 99; } .pholio-device-lightbox img { diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css index aa216b7d73..f02fffabd7 100644 --- a/webroot/rsrc/css/core/remarkup.css +++ b/webroot/rsrc/css/core/remarkup.css @@ -326,7 +326,6 @@ } .remarkup-control-order-mode { - z-index: 90; position: fixed; top: -1px; bottom: -1px; @@ -335,11 +334,12 @@ } .remarkup-control-order-mode textarea.remarkup-assist-textarea { - position: fixed; - top: 25px; - bottom: -2px; + position: absolute; + top: 26px; left: 0; right: 0; + bottom: 0; + /* NOTE: This doesn't work in Firefox, there's a JS behavior to correct it. */ height: auto; border-width: 1px 0 0 0; outline: none; diff --git a/webroot/rsrc/css/core/z-index.css b/webroot/rsrc/css/core/z-index.css index 130985483c..139cc4cf2b 100644 --- a/webroot/rsrc/css/core/z-index.css +++ b/webroot/rsrc/css/core/z-index.css @@ -18,6 +18,10 @@ z-index: 2; } +.pholio-new-inline-comment { + z-index: 2; +} + .phabricator-timeline-icon-fill { z-index: 3; } @@ -108,6 +112,10 @@ div.jx-typeahead-results { z-index: 18; } +.pholio-device-lightbox { + z-index: 20; +} + .dropdown-menu-frame { z-index: 32; } @@ -115,3 +123,7 @@ div.jx-typeahead-results { .busy { z-index: 40; } + +.remarkup-control-order-mode { + z-index: 50; +} diff --git a/webroot/rsrc/js/application/core/behavior-phabricator-remarkup-assist.js b/webroot/rsrc/js/application/core/behavior-phabricator-remarkup-assist.js index eeca7aed9d..1eeb507530 100644 --- a/webroot/rsrc/js/application/core/behavior-phabricator-remarkup-assist.js +++ b/webroot/rsrc/js/application/core/behavior-phabricator-remarkup-assist.js @@ -6,6 +6,7 @@ * phabricator-textareautils * javelin-workflow * phabricator-notification + * javelin-vector */ JX.behavior('phabricator-remarkup-assist', function(config) { @@ -19,11 +20,14 @@ JX.behavior('phabricator-remarkup-assist', function(config) { } // First, disable any active mode. - if (edit_mode == 'order') { - JX.DOM.alterClass(edit_root, 'remarkup-control-order-mode', false); - } - if (edit_mode == 'chaos') { - JX.DOM.alterClass(edit_root, 'remarkup-control-chaos-mode', false); + if (edit_root) { + if (edit_mode == 'order') { + JX.DOM.alterClass(edit_root, 'remarkup-control-order-mode', false); + } + if (edit_mode == 'chaos') { + JX.DOM.alterClass(edit_root, 'remarkup-control-chaos-mode', false); + } + JX.DOM.find(edit_root, 'textarea').style.height = ''; } edit_root = root; @@ -32,6 +36,7 @@ JX.behavior('phabricator-remarkup-assist', function(config) { // Now, apply the new mode. if (mode == 'order') { JX.DOM.alterClass(edit_root, 'remarkup-control-order-mode', true); + resizearea(); } if (mode == 'chaos') { @@ -41,6 +46,30 @@ JX.behavior('phabricator-remarkup-assist', function(config) { JX.DOM.focus(JX.DOM.find(edit_root, 'textarea')); } + function resizearea() { + if (!edit_root) { + return; + } + if (edit_mode != 'order') { + return; + } + + // In Firefox, a textarea with position "absolute" or "fixed", anchored + // "top" and "bottom", and height "auto" renders as two lines high. Force + // it to the correct height with Javascript. + + var area = JX.DOM.find(edit_root, 'textarea'); + + var v = JX.Vector.getViewport(); + v.x = null; + v.y -= 26; + + v.setDim(area); + } + + JX.Stratcom.listen('resize', null, resizearea); + + JX.Stratcom.listen('keydown', null, function(e) { if (edit_mode == 'chaos') { cause_chaos();