✨ Text fragments support on amp viewer

extensions/amp-viewer-integration/0.1/amp-viewer-integration.js

@@ -34,6 +34,7 @@ import {dict} from '../../../src/core/types/object';
 import {getAmpdoc} from '../../../src/service';
 import {getData, listen, listenOnce} from '../../../src/event-helper';
 import {getSourceUrl} from '../../../src/url';
+import {isExperimentOn} from '../../../src/experiments';
 import {isIframed} from '../../../src/dom';
 
 const TAG = 'amp-viewer-integration';
@@ -111,10 +112,26 @@ export class AmpViewerIntegration {
  }
  );
  }
- /** @type {?HighlightInfoDef} */
- const highlightInfo = getHighlightParam(ampdoc);
- if (highlightInfo) {
- this.highlightHandler_ = new HighlightHandler(ampdoc, highlightInfo);
+
+ if (
+ 'fragmentDirective' in document &&
+ isExperimentOn(this.win, 'enable-text-fragments')
+ ) {
+ this.win.addEventListener('message', (e) => {
+ if (
+ e.origin !== 'https://www.google.com' ||
+ e.data?.directive?.length === 0
+ ) {
+ return;
+ }
+ this.updateUrlWithTextFragment_(e.data.directive);
+ });
+ } else {
+ /** @type {?HighlightInfoDef} */
+ const highlightInfo = getHighlightParam(ampdoc);
+ if (highlightInfo) {
+ this.highlightHandler_ = new HighlightHandler(ampdoc, highlightInfo);
+ }
  }
 
  const port = new WindowPortEmulator(
@@ -130,6 +147,14 @@ export class AmpViewerIntegration {
  );
  }
 
+ /**
+ * @param {string} fragment
+ * @private
+ */
+ updateUrlWithTextFragment_(fragment) {
+ window.location.replace('#:~:' + fragment);
+ }
+
  /**
  * @param {?Window} source
  * @param {string} origin

extensions/amp-viewer-integration/0.1/test/integration/test-amp-viewer-integration.js

@@ -23,6 +23,7 @@ import {
 import {ViewerForTesting} from '../../viewer-for-testing';
 import {done} from 'fetch-mock';
 import {getSourceUrl} from '../../../../../src/url';
+import {toggleExperiment} from '../../../../../src/experiments';
 
 describes.sandboxed('amp-viewer-integration', {}, () => {
  const ampDocSrc = '/test/fixtures/served/ampdoc-with-messaging.html';
@@ -230,6 +231,79 @@ describes.realWin(
  expect(initFocusHandlerStub).to.be.called;
  });
  });
+
+ // TODO(dmanek): remove `ifChrome` once other major browsers support
+ // text fragments (i.e. 'fragmentDirective' in document = true)
+ it.configure()
+ .ifChrome()
+ .run(
+ 'should update url based on text fragment post message',
+ async () => {
+ toggleExperiment(win, 'enable-text-fragments', true, true);
+
+ const updateUrlWithTextFragmentSpy = env.sandbox.spy();
+ ampViewerIntegration.updateUrlWithTextFragment_ = updateUrlWithTextFragmentSpy;
+
+ const text = 'will this higlight?';
+ const message = {
+ directive: text,
+ };
+
+ const mockEvent = new CustomEvent('message');
+ mockEvent.origin = 'https://www.google.com';
+ mockEvent.data = message;
+
+ ampViewerIntegration.init();
+
+ win.dispatchEvent(mockEvent);
+ expect(updateUrlWithTextFragmentSpy.calledOnce).to.be.true;
+ expect(updateUrlWithTextFragmentSpy.getCall(0).args[0]).to.equal(
+ text
+ );
+ }
+ );
+
+ it.configure()
+ .ifChrome()
+ .run('should not update url if origin it not google.com', async () => {
+ toggleExperiment(win, 'enable-text-fragments', true, true);
+
+ const updateUrlWithTextFragmentSpy = env.sandbox.spy();
+ ampViewerIntegration.updateUrlWithTextFragment_ = updateUrlWithTextFragmentSpy;
+
+ ampViewerIntegration.init();
+
+ const message = {
+ directive: 'will this highglight?',
+ };
+ const mockEvent = new CustomEvent('message');
+ mockEvent.origin = 'https://www.goøgle.com';
+ mockEvent.data = message;
+
+ win.dispatchEvent(mockEvent);
+ expect(updateUrlWithTextFragmentSpy.callCount).to.equal(0);
+ });
+
+ it.configure()
+ .ifChrome()
+ .run('should not update url if text fragment is empty', async () => {
+ toggleExperiment(win, 'enable-text-fragments', true, true);
+
+ const updateUrlWithTextFragmentSpy = env.sandbox.spy();
+ ampViewerIntegration.updateUrlWithTextFragment_ = updateUrlWithTextFragmentSpy;
+
+ ampViewerIntegration.init();
+
+ const message = {
+ directive: '',
+ };
+ const mockEvent = new CustomEvent('message');
+ mockEvent.origin = 'https://www.google.com';
+ mockEvent.data = message;
+
+ win.dispatchEvent(mockEvent);
+ expect(updateUrlWithTextFragmentSpy.callCount).to.equal(0);
+ });
  });
  }
 );