Merge pull request #3111 from overleaf/pr-file-outline-out-of-beta

File outline out of beta

GitOrigin-RevId: 64fa6554813b1d0ceff2b567922651509badecc7

services/web/app/views/project/editor/editor.pug

@@ -100,15 +100,19 @@ div.full-size(
 			tooltip-placement="right"
 			tooltip-append-to-body="true"
 			ng-click="syncToPdf()"
+			ng-disabled="syncToPdfInFlight"
 		)
-			i.synctex-control-icon
+			i.synctex-control-icon(ng-show="!syncToPdfInFlight")
+			i.synctex-spin-icon.fa.fa-refresh.fa-spin(ng-show="syncToPdfInFlight")
 		a.btn.btn-default.btn-xs.synctex-control.synctex-control-goto-code(
 			tooltip-html="'"+translate('go_to_pdf_location_in_code', {}, true)+"'"
 			tooltip-placement="right"
 			tooltip-append-to-body="true"
 			ng-click="syncToCode()"
+			ng-disabled="syncToCodeInFlight"
 		)
-			i.synctex-control-icon
+			i.synctex-control-icon(ng-show="!syncToCodeInFlight")
+			i.synctex-spin-icon.fa.fa-refresh.fa-spin(ng-show="syncToCodeInFlight")
 
 div.full-size(
 	ng-if="ui.pdfLayout == 'flat'"

services/web/app/views/project/editor/file-tree.pug

@@ -2,13 +2,13 @@ aside.editor-sidebar.full-size(
 	ng-controller="FileTreeController"
 	ng-class="{ 'multi-selected': multiSelectedCount > 0 }"
 	ng-show="ui.view != 'history' || !history.isV2"
-	vertical-resizable-panes=user.betaProgram && "outline-resizer"
-	vertical-resizable-panes-toggled-externally-on=user.betaProgram && "outline-toggled"
-	vertical-resizable-panes-min-size=user.betaProgram && "32"
-	vertical-resizable-panes-max-size=user.betaProgram && "75%"
+	vertical-resizable-panes="outline-resizer"
+	vertical-resizable-panes-toggled-externally-on="outline-toggled"
+	vertical-resizable-panes-min-size="32"
+	vertical-resizable-panes-max-size="75%"
 )
 	.file-tree(
-		vertical-resizable-top=user.betaProgram
+		vertical-resizable-top
 	)
 		.toolbar.toolbar-filetree(ng-if="permissions.write")
 			a(
@@ -99,20 +99,19 @@ aside.editor-sidebar.full-size(
 
 							span  {{ entity.name }}
 
-	if user.betaProgram
-		.outline-container(
-			vertical-resizable-bottom
-			ng-controller="OutlineController"
+	.outline-container(
+		vertical-resizable-bottom
+		ng-controller="OutlineController"
+	)
+		outline-pane(
+			is-tex-file="isTexFile"
+			outline="outline"
+			project-id="project_id"
+			jump-to-line="jumpToLine"
+			on-toggle="onToggle"
+			event-tracking="eventTracking"
+			highlighted-line="highlightedLine"
 		)
-			outline-pane(
-				is-tex-file="isTexFile"
-				outline="outline"
-				project-id="project_id"
-				jump-to-line="jumpToLine"
-				on-toggle="onToggle"
-				event-tracking="eventTracking"
-				highlighted-line="highlightedLine"
-			)
 
 
 script(type='text/ng-template', id='entityListItemTemplate')
@@ -156,8 +155,7 @@ script(type='text/ng-template', id='entityListItemTemplate')
 					dropdown,
 					ng-if="permissions.write"
 				)
-					a.dropdown-toggle(href, dropdown-toggle, stop-propagation="click")
-						i.fa.fa-chevron-down
+					a.dropdown-toggle.file-tree-dropdown-toggle(href, dropdown-toggle, stop-propagation="click")
 
 					ul.dropdown-menu.dropdown-menu-right
 						li
@@ -214,7 +212,7 @@ script(type='text/ng-template', id='entityListItemTemplate')
 				)
 					i.fa.fa-fw.toggle(
 						ng-if="entity.type == 'folder'"
-						ng-class="{'fa-chevron-right': !expanded, 'fa-chevron-down': expanded}"
+						ng-class="{'fa-angle-right': !expanded, 'fa-angle-down': expanded}"
 						ng-click="toggleExpanded()"
 					)
 
@@ -245,8 +243,7 @@ script(type='text/ng-template', id='entityListItemTemplate')
 						dropdown,
 						ng-if="permissions.write"
 					)
-						a.dropdown-toggle(href, dropdown-toggle, stop-propagation="click")
-							i.fa.fa-chevron-down
+						a.dropdown-toggle.file-tree-dropdown-toggle(href, dropdown-toggle, stop-propagation="click")
 
 						ul.dropdown-menu.dropdown-menu-right
 							li

services/web/frontend/js/ide/editor/EditorManager.js

@@ -139,8 +139,8 @@ export default (EditorManager = (function() {
       sl_console.log(`[openDoc] Opening ${doc.id}`)
       this.$scope.ui.view = 'editor'
 
-      const done = () => {
-        this.$scope.$broadcast('doc:after-opened')
+      const done = isNewDoc => {
+        this.$scope.$broadcast('doc:after-opened', { isNewDoc })
         if (options.gotoLine != null) {
           // allow Ace to display document before moving, delay until next tick
           // added delay to make this happen later that gotoStoredPosition in
@@ -163,7 +163,7 @@ export default (EditorManager = (function() {
         // automatically update the file tree whenever the file is opened
         this.ide.fileTreeManager.selectEntity(doc)
         this.$scope.$apply(() => {
-          return done()
+          return done(false)
         })
         return
       }
@@ -192,7 +192,7 @@ export default (EditorManager = (function() {
         return this.$scope.$apply(() => {
           this.$scope.editor.opening = false
           this.$scope.editor.sharejs_doc = sharejs_doc
-          return done()
+          return done(true)
         })
       })
     }

services/web/frontend/js/ide/outline/OutlineManager.js

@@ -18,9 +18,17 @@ class OutlineManager {
     this.ignoreNextScroll = false
     this.ignoreNextCursorUpdate = false
 
-    scope.$on('doc:after-opened', () => {
+    scope.$on('doc:after-opened', (ev, { isNewDoc }) => {
+      if (isNewDoc) {
+        // if a new doc is opened a cursor updates will be triggered before the
+        // content is loaded. We have to ignore it or the outline highlight
+        // will be incorrect. This doesn't happen when `doc:after-opened` is
+        // fired without a new doc opened.
+        this.ignoreNextCursorUpdate = true
+      }
+      // always ignore the next scroll update so the cursor update takes
+      // precedence
       this.ignoreNextScroll = true
-      this.ignoreNextCursorUpdate = true
       this.shareJsDoc = scope.editor.sharejs_doc
       this.isTexFile = isValidTeXFile(scope.editor.open_doc_name)
       this.updateOutline()

services/web/frontend/js/ide/outline/components/OutlineItem.js

@@ -3,6 +3,14 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import OutlineList from './OutlineList'
 
+function getChildrenLines(children) {
+  return (children || [])
+    .map(child => {
+      return getChildrenLines(child.children).concat(child.line)
+    })
+    .flat()
+}
+
 function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) {
   const [expanded, setExpanded] = useState(true)
   const titleElementRef = createRef()
@@ -17,8 +25,13 @@ function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) {
     'fa-angle-right': !expanded
   })
 
+  const hasHighlightedChild =
+    !expanded &&
+    getChildrenLines(outlineItem.children).includes(highlightedLine)
+
   const itemLinkClasses = classNames('outline-item-link', {
-    'outline-item-link-highlight': highlightedLine === outlineItem.line
+    'outline-item-link-highlight':
+      highlightedLine === outlineItem.line || hasHighlightedChild
   })
 
   function handleExpandCollapseClick() {

services/web/frontend/js/ide/outline/components/OutlinePane.js

@@ -55,19 +55,19 @@ function OutlinePane({
         >
           <i className={expandCollapseIconClasses} />
           <h4 className="outline-header-name">File outline</h4>
-          <OverlayTrigger placement="top" overlay={tooltip} delayHide={100}>
-            <a
-              href="/beta/participate"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="outline-header-beta-badge"
-            >
-              <span className="sr-only">
-                The File outline is a beta feature. Click here to manage your
-                beta program membership.
-              </span>
-            </a>
-          </OverlayTrigger>
+          {expanded ? (
+            <OverlayTrigger placement="top" overlay={tooltip} delayHide={100}>
+              <a
+                href="https://forms.gle/8N1iSS9rkgmpFDHY6"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="outline-header-info-badge"
+                onClick={ev => ev.stopPropagation()}
+              >
+                <span className="sr-only">{infoContent}</span>
+              </a>
+            </OverlayTrigger>
+          ) : null}
         </button>
       </header>
       {expanded && isTexFile ? (
@@ -83,11 +83,13 @@ function OutlinePane({
   )
 }
 
-const tooltip = (
-  <Tooltip id="outline-beta-badge-tooltip">
-    The <strong>File outline</strong> is a beta feature.
-  </Tooltip>
+const infoContent = (
+  <>
+    The <strong>File outline</strong> is a new feature. Click the icon to give
+    feedback.
+  </>
 )
+const tooltip = <Tooltip id="outline-info-tooltip">{infoContent}</Tooltip>
 
 OutlinePane.propTypes = {
   isTexFile: PropTypes.bool.isRequired,

services/web/frontend/js/ide/outline/components/OutlineRoot.js

@@ -21,7 +21,7 @@ function OutlineRoot({ outline, jumpToLine, highlightedLine }) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            Know more about the file outline
+            Find out more about the file outline
           </a>
         </div>
       )}

services/web/frontend/js/ide/pdf/controllers/PdfController.js

@@ -973,6 +973,8 @@ App.factory('synctex', function(ide, $http, $q) {
 
 App.controller('PdfSynctexController', function($scope, synctex, ide) {
   this.cursorPosition = null
+  $scope.syncToPdfInFlight = false
+  $scope.syncToCodeInFlight = false
   ide.$scope.$on('cursor:editor:update', (event, cursorPosition) => {
     this.cursorPosition = cursorPosition
   })
@@ -981,14 +983,19 @@ App.controller('PdfSynctexController', function($scope, synctex, ide) {
     if (this.cursorPosition == null) {
       return
     }
-    synctex.syncToPdf(this.cursorPosition).then(highlights => {
-      $scope.pdf.highlights = highlights
-    })
+    $scope.syncToPdfInFlight = true
+    synctex
+      .syncToPdf(this.cursorPosition)
+      .then(highlights => {
+        $scope.pdf.highlights = highlights
+      })
+      .finally(() => ($scope.syncToPdfInFlight = false))
   }
 
   ide.$scope.$on('cursor:editor:syncToPdf', $scope.syncToPdf)
 
   $scope.syncToCode = function() {
+    $scope.syncToCodeInFlight = true
     synctex
       .syncToCode($scope.pdf.position, {
         includeVisualOffset: true,
@@ -998,6 +1005,7 @@ App.controller('PdfSynctexController', function($scope, synctex, ide) {
         const { doc, line } = data
         ide.editorManager.openDoc(doc, { gotoLine: line })
       })
+      .finally(() => ($scope.syncToCodeInFlight = false))
   }
 })
 

services/web/frontend/stylesheets/app/editor/file-tree.less

@@ -142,10 +142,30 @@
       i.toggle {
         width: 24px;
         padding: 6px;
-        font-size: 0.7rem;
+        font-size: 16px;
         color: @file-tree-item-toggle-color;
       }
 
+      .file-tree-dropdown-toggle {
+        display: flex;
+        align-items: center;
+        color: #fff;
+        white-space: pre;
+        line-height: 6px;
+        font-size: 20px;
+        height: 100%;
+        padding: 0 12px 0 18px;
+
+        &:hover,
+        &:focus {
+          text-decoration: none;
+        }
+        &::before {
+          content: '\00B7\A\00B7\A\00B7';
+          margin-top: -4px;
+        }
+      }
+
       &.multi-selected {
         > .entity {
           > .entity-name {
@@ -172,9 +192,6 @@
       .dropdown {
         position: absolute;
         right: 0;
-        > a {
-          padding: 0 12px;
-        }
       }
 
       .rename-input {
@@ -234,7 +251,8 @@
           .fake-full-width-bg(@file-tree-item-selected-bg);
 
           .entity-menu-toggle {
-            display: inline;
+            display: inline-block;
+            height: 100%;
           }
         }
       }

services/web/frontend/stylesheets/app/editor/outline.less

@@ -62,19 +62,21 @@
   text-overflow: ellipsis;
 }
 
-.outline-header-beta-badge {
+.outline-header-info-badge {
   display: inline-block;
-  border-radius: @border-radius-base;
-  background-color: @orange;
   width: @outline-h-rhythm * 0.75;
   height: @outline-v-rhythm * 0.75;
   line-height: @outline-v-rhythm * 0.75;
   text-align: center;
   cursor: pointer;
+  background-color: @info-badge-bg;
+  font-family: @font-family-serif;
   color: #fff;
+  font-style: italic;
+  border-radius: @outline-h-rhythm * 0.375;
 
   &::before {
-    content: 'β';
+    content: 'i';
   }
 
   &:hover,
@@ -174,6 +176,7 @@
   border-radius: @border-radius-base;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: left;
   &:hover,
   &:focus {
     outline: 0;

services/web/frontend/stylesheets/app/editor/pdf.less

@@ -233,6 +233,11 @@
   background-color: fade(@btn-default-bg, 80%);
   transition: background 0.15s ease;
 
+  &[disabled] {
+    opacity: 1;
+    background-color: fade(@btn-default-bg, 60%);
+  }
+
   > .synctex-control-icon {
     display: inline-block;
     font: normal normal normal 14px/1 FontAwesome;
@@ -241,6 +246,10 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+
+  > .synctex-spin-icon {
+    margin-top: 2px;
+  }
 }
 
 .synctex-control-goto-pdf > .synctex-control-icon {

services/web/frontend/stylesheets/app/project-list.less

@@ -325,8 +325,7 @@ ul.folders-menu {
   }
   > li.folders-menu-item-with-tooltip {
     > a {
-      padding-right: 1.5 * @folders-menu-item-h-padding +
-        @folders-menu-tooltip-size;
+      padding-right: 1.5 * @folders-menu-item-h-padding + @info-badge-size;
     }
   }
   > li > a.small {
@@ -414,15 +413,15 @@ ul.folders-menu {
   position: absolute;
   top: 50%;
   right: @folders-menu-item-h-padding;
-  width: @folders-menu-tooltip-size;
-  height: @folders-menu-tooltip-size;
-  margin-top: -(floor(@folders-menu-tooltip-size / 2));
-  line-height: @folders-menu-tooltip-size;
-  background-color: @folders-menu-tooltip-bg;
+  width: @info-badge-size;
+  height: @info-badge-size;
+  margin-top: -(floor(@info-badge-size / 2));
+  line-height: @info-badge-size;
+  background-color: @info-badge-bg;
   font-family: @font-family-serif;
   color: #fff;
   font-style: italic;
-  border-radius: ceil(@folders-menu-tooltip-size / 2);
+  border-radius: ceil(@info-badge-size / 2);
   text-align: center;
   font-weight: 700;
   @media (min-width: @screen-sm-min) {

services/web/frontend/stylesheets/core/variables.less

@@ -956,8 +956,8 @@
 @folders-tag-border-color: @folders-tag-menu-color;
 @folders-tag-menu-active-hover: rgba(0, 0, 0, 0.1);
 @folders-tag-menu-hover: rgba(0, 0, 0, 0.1);
-@folders-menu-tooltip-size: 21px;
-@folders-menu-tooltip-bg: @ol-blue;
+@info-badge-size: 21px;
+@info-badge-bg: @ol-blue;
 // Progress bars
 @progress-border-radius: @line-height-computed;
 @progress-border-width: 0;