Display document segment information in Help panel

src/sidebar/components/VersionInfo.js

@@ -70,6 +70,11 @@ function VersionInfo({ toastMessenger, versionData }) {
         <VersionInfoItem label="Fingerprint">
           {versionData.fingerprint}
         </VersionInfoItem>
+        {versionData.segment && (
+          <VersionInfoItem label="Segment">
+            {versionData.segment}
+          </VersionInfoItem>
+        )}
         <VersionInfoItem label="Account">{versionData.account}</VersionInfoItem>
         <VersionInfoItem label="Date">{versionData.timestamp}</VersionInfoItem>
       </dl>

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

@@ -61,7 +61,20 @@ describe('VersionInfo', () => {
     assert.include(componentText, 'fakeFingerprint');
     assert.include(componentText, 'fakeAccount');
     assert.include(componentText, 'fakeTimestamp');
+
+    // No `segment` property is set on the `versionData` prop by default, so
+    // the "Segment" field should not be displayed.
+    assert.notInclude(componentText, 'Segment');
+  });
+
+  it('renders segment info if `versionData.segment` is set', () => {
+    fakeVersionData.segment = 'CFI: /2, URL: /chapters/foo.xhtml';
+    const wrapper = createComponent();
+    const componentText = wrapper.text();
+    assert.include(componentText, 'Segment');
+    assert.include(componentText, 'CFI: /2, URL: /chapters/foo.xhtml');
   });
+
   describe('copy version info to clipboard', () => {
     it('copies version info to clipboard when copy button clicked', () => {
       const wrapper = createComponent();

src/sidebar/helpers/test/version-data-test.js

@@ -80,6 +80,18 @@ describe('sidebar/helpers/version-data', () => {
         ]);
         assert.equal(versionData.fingerprint, 'DEADBEEF');
       });
+
+      it('sets `segment` property if `segment` is present in frame details', () => {
+        const versionData = new VersionData({}, [
+          { segment: { cfi: '/2', url: '/chapters/02.xhtml' } },
+        ]);
+        assert.equal(versionData.segment, 'CFI: /2, URL: /chapters/02.xhtml');
+      });
+
+      it('does not set `segment` property if `segment` is not present in frame details', () => {
+        const versionData = new VersionData({}, []);
+        assert.isUndefined(versionData.segment);
+      });
     });
   });
 

src/sidebar/helpers/version-data.js

+/**
+ * @typedef {import('../../types/annotator').SegmentInfo} SegmentInfo
+ */
+
 /**
  * @typedef AuthState
  * @prop {string|null} [userid]
@@ -17,6 +21,7 @@
  * @typedef DocumentInfo
  * @prop {string=} [uri] - Current document URL
  * @prop {DocMetadata} [metadata] - Document metadata
+ * @prop {SegmentInfo} [segment]
  */
 
 export class VersionData {
@@ -47,6 +52,21 @@ export class VersionData {
 
     this.account = accountString;
     this.timestamp = new Date().toString();
+
+    const segmentInfo = documentInfo[0]?.segment;
+    if (segmentInfo) {
+      const segmentFields = [];
+      if (segmentInfo.cfi) {
+        segmentFields.push(['CFI', segmentInfo.cfi]);
+      }
+      if (segmentInfo.url) {
+        segmentFields.push(['URL', segmentInfo.url]);
+      }
+
+      this.segment = segmentFields
+        .map(([field, value]) => `${field}: ${value}`)
+        .join(', ');
+    }
   }
 
   /**