Remove "enabled" state from excerpt component

Simplify the `<excerpt>` component by removing the `enabled` property.
This property was used to avoid the markdown editor being truncated when
rendered inside the excerpt. However it is possible to achieve the same
result without this property by using `ng-if`.

This change will simplify porting the excerpt component to Preact and
also paves the way to splitting the existing `<markdown>` component into
two separate, simpler, components: One for the "view" mode and one for the "edit"
mode.

src/sidebar/components/excerpt.js

@@ -12,10 +12,6 @@ function ExcerptController($element, $scope, ExcerptOverflowMonitor) {
     this.animate = true;
   }
 
-  if (this.enabled === undefined) {
-    this.enabled = true;
-  }
-
   this.isExpandable = function() {
     return this.overflowing && this.collapse;
   };
@@ -68,7 +64,6 @@ function ExcerptController($element, $scope, ExcerptOverflowMonitor) {
     {
       getState: function() {
         return {
-          enabled: self.enabled,
           animate: self.animate,
           collapsedHeight: self.collapsedHeight,
           collapse: self.collapse,
@@ -123,7 +118,6 @@ function ExcerptController($element, $scope, ExcerptOverflowMonitor) {
 
   // Watch input properties which may affect the overflow state
   $scope.$watch('vm.contentData', overflowMonitor.check);
-  $scope.$watch('vm.enabled', overflowMonitor.check);
 
   // Trigger an initial calculation of the overflow state.
   //
@@ -150,8 +144,6 @@ module.exports = {
      * is overflowing.
      */
     contentData: '<',
-    /** Whether or not truncation should be enabled */
-    enabled: '<?',
     /**
      * Specifies whether controls to expand and collapse
      * the excerpt should be shown inside the <excerpt> component.

src/sidebar/components/test/excerpt-test.js

@@ -14,7 +14,6 @@ describe('excerpt', function() {
 
   function excerptComponent(attrs, content) {
     const defaultAttrs = {
-      enabled: true,
       contentData: 'the content',
       collapsedHeight: 40,
       inlineControls: false,
@@ -51,7 +50,6 @@ describe('excerpt', function() {
     it('passes input properties to overflow state recalc', function() {
       const attrs = {
         animate: false,
-        enabled: true,
         collapsedHeight: 40,
         inlineControls: false,
         overflowHysteresis: 20,
@@ -59,7 +57,6 @@ describe('excerpt', function() {
       excerptComponent(attrs, '<span></span>');
       assert.deepEqual(fakeOverflowMonitor.ctrl.getState(), {
         animate: attrs.animate,
-        enabled: attrs.enabled,
         collapsedHeight: attrs.collapsedHeight,
         collapse: true,
         overflowHysteresis: attrs.overflowHysteresis,
@@ -136,33 +133,6 @@ describe('excerpt', function() {
     });
   });
 
-  describe('enabled state', function() {
-    it('renders its contents in a .excerpt element by default', function() {
-      const element = excerptComponent({}, '<span id="foo"></span>');
-
-      assert.equal(element.find('.excerpt #foo').length, 1);
-    });
-
-    it('when enabled, renders its contents in a .excerpt element', function() {
-      const element = excerptComponent(
-        { enabled: true },
-        '<span id="foo"></span>'
-      );
-
-      assert.equal(element.find('.excerpt #foo').length, 1);
-    });
-
-    it('when disabled, renders its contents but not in a .excerpt element', function() {
-      const element = excerptComponent(
-        { enabled: false },
-        '<span id="foo"></span>'
-      );
-
-      assert.equal(element.find('.excerpt #foo').length, 0);
-      assert.equal(element.find('#foo').length, 1);
-    });
-  });
-
   function isHidden(el) {
     return !el.offsetParent || el.classList.contains('ng-hide');
   }

src/sidebar/templates/annotation.html

@@ -31,20 +31,25 @@
 
   <!-- Body -->
   <section name="text" class="annotation-body">
-    <excerpt enabled="!vm.editing()"
+    <excerpt
       inline-controls="false"
       on-collapsible-changed="vm.setBodyCollapsible(collapsible)"
       collapse="vm.collapseBody"
       collapsed-height="400"
       overflow-hysteresis="20"
-      content-data="vm.state().text">
+      content-data="vm.state().text"
+      ng-if="!vm.editing()">
       <markdown text="vm.state().text"
                 custom-text-class="{'annotation-body is-hidden':vm.isHiddenByModerator(),
                                     'has-content':vm.hasContent()}"
-                on-edit-text="vm.setText(text)"
-                read-only="!vm.editing()">
+                read-only="true">
       </markdown>
     </excerpt>
+    <markdown text="vm.state().text"
+              on-edit-text="vm.setText(text)"
+              read-only="false"
+              ng-if="vm.editing()">
+    </markdown>
   </section>
   <!-- / Body -->
 

src/sidebar/templates/excerpt.html

-<div ng-transclude ng-if="!vm.enabled"></div>
-<div class="excerpt__container" ng-if="vm.enabled">
+<div class="excerpt__container">
   <div class="excerpt" ng-style="vm.contentStyle()">
     <div ng-transclude></div>
     <div ng-click="vm.expand()"

src/sidebar/util/excerpt-overflow-monitor.js

@@ -44,12 +44,9 @@ function ExcerptOverflowMonitor(excerpt, requestAnimationFrame) {
 
     pendingUpdate = false;
 
-    let overflowing = false;
-    if (state.enabled) {
-      const hysteresisPx = state.overflowHysteresis || 0;
-      overflowing =
-        excerpt.contentHeight() > state.collapsedHeight + hysteresisPx;
-    }
+    const hysteresisPx = state.overflowHysteresis || 0;
+    const overflowing =
+      excerpt.contentHeight() > state.collapsedHeight + hysteresisPx;
     if (overflowing === prevOverflowing) {
       return;
     }
@@ -76,9 +73,6 @@ function ExcerptOverflowMonitor(excerpt, requestAnimationFrame) {
    */
   function contentStyle() {
     const state = excerpt.getState();
-    if (!state.enabled) {
-      return {};
-    }
 
     let maxHeight = '';
     if (prevOverflowing) {

src/sidebar/util/test/excerpt-overflow-monitor-test.js

@@ -12,7 +12,6 @@ describe('ExcerptOverflowMonitor', function() {
     contentHeight = 0;
 
     state = {
-      enabled: true,
       animate: true,
       collapsedHeight: 100,
       collapse: true,
@@ -34,7 +33,7 @@ describe('ExcerptOverflowMonitor', function() {
     });
   });
 
-  context('when enabled', function() {
+  describe('overflow state', function() {
     it('overflows if height > collaped height + hysteresis', function() {
       contentHeight = 200;
       monitor.check();
@@ -54,18 +53,6 @@ describe('ExcerptOverflowMonitor', function() {
     });
   });
 
-  context('when not enabled', function() {
-    beforeEach(function() {
-      state.enabled = false;
-    });
-
-    it('does not overflow if height > collapsed height + hysteresis', function() {
-      contentHeight = 200;
-      monitor.check();
-      assert.calledWith(ctrl.onOverflowChanged, false);
-    });
-  });
-
   context('#contentStyle', function() {
     it('sets max-height if collapsed and overflowing', function() {
       contentHeight = 200;