🖍 [Story devtools] Rename logs and move Page Experience (#32451)

* Changed logs->debug and PE to help * Capitalize link * Moved url creation to showHelpDialog * Formatted file
ampproject · Feb 8, 2021 · 7630b2b · 7630b2b
1 parent 9f6af26
commit 7630b2b
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 133 deletions.
diff --git a/...ools/0.1/amp-story-dev-tools-tab-logs.css → ...ols/0.1/amp-story-dev-tools-tab-debug.css b/...ools/0.1/amp-story-dev-tools-tab-logs.css → ...ols/0.1/amp-story-dev-tools-tab-debug.css
@@ -14,19 +14,19 @@
  * limitations under the License.
  */
 
-amp-story-dev-tools-tab-logs {
+amp-story-dev-tools-tab-debug {
   overflow-y: auto !important;
   padding: var(--i-amphtml-story-dev-tools-vertical-spacing) 10% !important;
 }
 
-amp-story-dev-tools-tab-logs::-webkit-scrollbar {
+amp-story-dev-tools-tab-debug::-webkit-scrollbar {
   width: 8px !important;
 }
-amp-story-dev-tools-tab-logs::-webkit-scrollbar-thumb {
+amp-story-dev-tools-tab-debug::-webkit-scrollbar-thumb {
   background-color: var(--i-amphtml-story-dev-tools-white-transparent-1) !important;
   border-radius: 3px !important;
 }
-amp-story-dev-tools-tab-logs::-webkit-scrollbar-thumb:hover {
+amp-story-dev-tools-tab-debug::-webkit-scrollbar-thumb:hover {
   background-color: var(--i-amphtml-story-dev-tools-white-transparent-2) !important;
 }
 
@@ -127,13 +127,13 @@ amp-story-dev-tools-tab-logs::-webkit-scrollbar-thumb:hover {
   padding: 1px !important;
 }
 
-.i-amphtml-story-dev-tools-logs-success-image {
+.i-amphtml-story-dev-tools-debug-success-image {
   background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="295" height="308" fill="none"><rect width="233.8" height="165.73" x="34" y="92.5" fill="#161725" rx="6"/><path fill="#fff" d="M262.07 261.03H39.67a9 9 0 01-8.98-8.99V96.84a9 9 0 018.99-8.98h222.4a9 9 0 018.98 8.99v155.18c.02 4.96-4.02 9-8.99 9zM39.67 91.16A5.68 5.68 0 0034 96.85v155.18a5.69 5.69 0 005.68 5.68h222.4a5.69 5.69 0 005.68-5.68V96.85a5.69 5.69 0 00-5.69-5.69H39.67z"/><path fill="#fff" d="M269.42 107H32.33V96.85a7.34 7.34 0 017.35-7.35h222.4a7.34 7.34 0 017.34 7.35V107z"/><path fill="#161725" d="M46.83 97.51a3.3 3.3 0 11-6.6.01 3.3 3.3 0 016.6 0zM56.74 97.51a3.3 3.3 0 11-6.6.01 3.3 3.3 0 016.6 0zM66.64 97.51a3.3 3.3 0 11-6.6.01 3.3 3.3 0 016.6 0z"/><path fill="#fff" d="M0 228.89c3.97-1.15 7.5-3.4 10.44-6.68a21.51 21.51 0 003.18-4.43l7.56 3.66c-.22.47-5.79 11.73-18.85 15.5L0 228.9z"/><g filter="url(#filter0_d)"><path fill="#FCF75A" d="M149.13 250.34c1.15 3.97 3.4 7.49 6.68 10.44a21.52 21.52 0 004.43 3.18l-3.66 7.56c-.48-.22-11.73-5.8-15.5-18.86l8.05-2.32z"/></g><g filter="url(#filter1_d)"><path fill="#FCF75A" d="M177.87 72.46a22.36 22.36 0 008.17 9.32 21.4 21.4 0 004.85 2.47l-2.48 8.01c-.5-.15-12.46-3.95-18.16-16.29l7.62-3.51z"/></g><path fill="#FCF75A" d="M216.8 119.93c1.65 1.72 2.81 3.4 3.53 5.13a9.9 9.9 0 01.59 6.35c-1.64 6.52-9.68 8.91-10.59 9.16l-2.23-8.1h-.02c1.77-.52 4.43-1.94 4.7-3.13.15-.62-.46-2.14-2.72-4.3l5.79-6.07.96.96z"/><path fill="#9F9AEE" d="M47.88 268.2c5.34.43 10-1.54 13.49-5.71 2.43-2.92 3.41-5.92 3.52-6.26l-7.7-2.4v-.03c0 .02-.65 1.94-2.17 3.69a7.25 7.25 0 01-6.45 2.66l-.69 8.04zM83.98 147.28c.08-.22.63-1.58 4.1-5.85 1.9-2.36 3.73-4.4 3.75-4.41l-3.5-3.14c-.07.09-1.9 2.13-3.88 4.58-3.77 4.64-4.62 6.43-4.93 7.38l4.46 1.44z"/><path fill="#79B3FF" d="M281.1 169.84c-.42 0-2.93-.14-11.81-3.44-4.89-1.8-9.22-3.66-9.26-3.69l-3.18 7.43c.18.08 4.53 1.93 9.6 3.82 9.65 3.57 13.03 3.96 14.74 3.95l-.1-8.07z"/><path fill="#4E5EAF" d="M123.9 289.63c-.27.3-2.07 2.06-10.51 6.35-4.63 2.36-8.94 4.3-8.98 4.31l3.32 7.38c.19-.09 4.5-2.01 9.31-4.48 9.17-4.67 11.75-6.9 12.9-8.17l-6.03-5.4zM181.52 241.7c-.2-.04-1.41-.33-5.42-2.65a97.79 97.79 0 01-4.16-2.52l-2.26 3.12c.08.05 2.02 1.3 4.31 2.61 4.36 2.52 5.97 3 6.8 3.15l.73-3.72z"/><g filter="url(#filter2_d)"><path fill="#79B3FF" d="M40.56 142.84c-.25.33-1.95 2.16-10.14 6.95-4.5 2.62-8.68 4.8-8.71 4.82l3.72 7.18c.19-.1 4.37-2.27 9.04-5 8.9-5.17 11.35-7.56 12.42-8.89l-6.33-5.06z"/></g><path fill="#FCF75A" d="M294.97 287.33c0-5.16-2.44-9.36-5.45-9.36-.8 0-13.27 4.82-13.27 4.82l1.38 18.54 12.9-4.82c2.48-.77 4.44-4.59 4.44-9.18z"/><path fill="#4E5EAF" d="M258 279.02a8.02 8.02 0 015.35-3.2c-11.7-7.93-28.4-19.3-35.62-24.65a4.25 4.25 0 00-5.92.86 4.25 4.25 0 00.86 5.92c6.4 4.73 21.54 17.25 33.9 27.52-.47-2.2 0-4.54 1.44-6.45z"/><path fill="#FCF75A" d="M275.1 291.63c1.38-1.86 3.82-5.4.76-7.35 0 0-5.3-3.54-12.5-8.46a8.13 8.13 0 00-6.78 9.65l18.38 15.38c3.05 2.01-1.24-7.35.14-9.22z"/><path fill="#AE9D00" d="M276.82 301.48c3 0 5.44-4.2 5.44-9.37 0-5.17-2.44-9.36-5.44-9.36-3 0-5.44 4.19-5.44 9.36 0 5.17 2.43 9.37 5.44 9.37z"/><path fill="#FCF75A" d="M279.88 291.35c0-3.25-1.3-5.69-3.01-5.69-1.72 0-3.01 2.44-3.01 5.69 0 2.1.57 3.96 1.48 4.96l.96-.9c-.67-.72-1.15-2.34-1.15-4.06 0-1.25.24-2.44.62-3.3.33-.67.72-1.1 1.1-1.1.38 0 .76.43 1.1 1.1.38.86.62 2.06.62 3.3 0 3.96-1.39 8.02-3.78 9.4.43.3.91.53 1.34.63 2.25-1.82 3.73-5.54 3.73-10.03z"/><g filter="url(#filter3_d)"><path fill="#4E5EAF" d="M139.32 73.67c2.15 5.05-7.08 13.8-20.57 19.46-13.5 5.72-26.16 6.22-28.27 1.16C88.38 89.24 82.87 8 82.87 8s54.34 60.62 56.45 65.67z"/><path fill="#9F9AEE" d="M117.55 58.14a52.33 52.33 0 01-30.71 3.28c.46 5.42.91 10.6 1.37 15.2 11.17 3.68 24.17 3.39 36.42-1.79 4.01-1.7 7.7-3.8 11.05-6.25a572.66 572.66 0 00-11.55-13.75 48.89 48.89 0 01-6.58 3.31zM100.04 27.34a51.1 51.1 0 01-15.73 1.49c.38 4.93.79 10.43 1.2 16.06a52.16 52.16 0 0027.57-2.73c-4.39-5.05-8.9-10.18-13.04-14.82z"/></g><path fill="#fff" d="M151.5 159.58a22.93 22.93 0 10.02 45.85 22.93 22.93 0 00-.02-45.85zm-4.58 34.38l-9.17-9.17 3.2-3.2 5.97 5.95 15.12-15.12 3.21 3.2-18.33 18.34z"/><defs><filter id="filter0_d" width="51.16" height="53.19" x="125.07" y="240.34" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="6"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0.0375 0 0 0 0 0.045 0 0 0 0 0.1125 0 0 0 0.56 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><filter id="filter1_d" width="54.84" height="57.72" x="153.89" y="59.99" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="6"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0.0375 0 0 0 0 0.045 0 0 0 0 0.1125 0 0 0 0.56 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><filter id="filter2_d" width="60.08" height="61.82" x="3.62" y="125.72" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0.0375 0 0 0 0 0.045 0 0 0 0 0.1125 0 0 0 1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><filter id="filter3_d" width="80.77" height="113.78" x="66.87" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-4" dy="4"/><feGaussianBlur stdDeviation="6"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs></svg>') !important;
   width: 295px !important;
   height: 308px !important;
 }
 
-.i-amphtml-story-dev-tools-logs-success {
+.i-amphtml-story-dev-tools-debug-success {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
@@ -142,13 +142,13 @@ amp-story-dev-tools-tab-logs::-webkit-scrollbar-thumb:hover {
   position: relative !important;
 }
 
-.i-amphtml-story-dev-tools-logs-success .i-amphtml-story-dev-tools-log-status-title {
+.i-amphtml-story-dev-tools-debug-success .i-amphtml-story-dev-tools-log-status-title {
   position: absolute !important;
   left: 0 !important;
   top: 0 !important;
 }
 
-.i-amphtml-story-dev-tools-logs-success-message {
+.i-amphtml-story-dev-tools-debug-success-message {
   font-size: 28px !important;
   font-weight: 600 !important;
   text-align: center !important;

diff --git a/...tools/0.1/amp-story-dev-tools-tab-logs.js → ...ools/0.1/amp-story-dev-tools-tab-debug.js b/...tools/0.1/amp-story-dev-tools-tab-logs.js → ...ools/0.1/amp-story-dev-tools-tab-debug.js
@@ -27,8 +27,8 @@ import {user, userAssert} from '../../../src/log';
  * @param {string} storyUrl
  * @return {!Element} the layout
  */
-export function createTabLogsElement(win, storyUrl) {
-  const element = win.document.createElement('amp-story-dev-tools-tab-logs');
+export function createTabDebugElement(win, storyUrl) {
+  const element = win.document.createElement('amp-story-dev-tools-tab-debug');
   element.setAttribute('data-story-url', storyUrl);
   return element;
 }
@@ -40,9 +40,9 @@ export function createTabLogsElement(win, storyUrl) {
  */
 const buildSuccessMessageTemplate = (element) => {
   const html = htmlFor(element);
-  return html`<div class="i-amphtml-story-dev-tools-logs-success">
-    <div class="i-amphtml-story-dev-tools-logs-success-image"></div>
-    <h1 class="i-amphtml-story-dev-tools-logs-success-message">
+  return html`<div class="i-amphtml-story-dev-tools-debug-success">
+    <div class="i-amphtml-story-dev-tools-debug-success-image"></div>
+    <h1 class="i-amphtml-story-dev-tools-debug-success-message">
       Great Job!<br />No issues found
     </h1>
   </div>`;
@@ -81,9 +81,9 @@ const buildLogMessageTemplate = (element) => {
 };
 
 /** @const {string} */
-const TAG = 'AMP_STORY_DEV_TOOLS_LOGS';
+const TAG = 'AMP_STORY_DEV_TOOLS_DEBUG';
 
-export class AmpStoryDevToolsTabLogs extends AMP.BaseElement {
+export class AmpStoryDevToolsTabDebug extends AMP.BaseElement {
   /** @param {!Element} element */
   constructor(element) {
     super(element);
@@ -105,13 +105,13 @@ export class AmpStoryDevToolsTabLogs extends AMP.BaseElement {
       )
       .then((errorList) => {
         this.errorList_ = errorList;
-        this.updateLogsTabIcon(errorList);
+        this.updateDebugTabIcon(errorList);
       });
   }
 
   /** @override */
   layoutCallback() {
-    return this.buildLogsContent_();
+    return this.buildDebugContent_();
   }
 
   /** @override */
@@ -152,14 +152,14 @@ export class AmpStoryDevToolsTabLogs extends AMP.BaseElement {
    * @private
    * @return {!Promise}
    */
-  buildLogsContent_() {
-    const logsContainer = this.errorList_.length
+  buildDebugContent_() {
+    const debugContainer = this.errorList_.length
       ? this.createErrorsList_()
       : buildSuccessMessageTemplate(this.element);
-    logsContainer.prepend(this.buildLogsTitle_(this.errorList_.length));
+    debugContainer.prepend(this.buildDebugTitle_(this.errorList_.length));
     this.mutateElement(() => {
       this.element.textContent = '';
-      this.element.appendChild(logsContainer);
+      this.element.appendChild(debugContainer);
     });
   }
 
@@ -169,7 +169,7 @@ export class AmpStoryDevToolsTabLogs extends AMP.BaseElement {
    * @param {number} errorCount
    * @return {!Element}
    */
-  buildLogsTitle_(errorCount) {
+  buildDebugTitle_(errorCount) {
     const statusIcon = buildStatusIcon(this.element, errorCount == 0);
     statusIcon.classList.add('i-amphtml-story-dev-tools-log-status-icon');
     const title = htmlFor(
@@ -185,14 +185,14 @@ export class AmpStoryDevToolsTabLogs extends AMP.BaseElement {
   }
 
   /**
-   * Updates the icon (passed / failed) next to the logs tab selector.
+   * Updates the icon (passed / failed) next to the debug tab selector.
    * @param {!Array} errorList
    */
-  updateLogsTabIcon(errorList) {
-    const logsTabSelector = this.win.document.querySelector(
-      '[data-tab="Logs"]'
+  updateDebugTabIcon(errorList) {
+    const debugTabSelector = this.win.document.querySelector(
+      '[data-tab="Debug"]'
     );
-    if (!logsTabSelector) {
+    if (!debugTabSelector) {
       return;
     }
     let statusIcon;
@@ -208,15 +208,15 @@ export class AmpStoryDevToolsTabLogs extends AMP.BaseElement {
     } else {
       statusIcon = buildStatusIcon(this.element, true);
     }
-    this.mutateElement(() => logsTabSelector.appendChild(statusIcon));
+    this.mutateElement(() => debugTabSelector.appendChild(statusIcon));
   }
 
   /**
    * @private
    * @return {!Element}
    */
   createErrorsList_() {
-    const logsContainer = this.element.ownerDocument.createElement('div');
+    const debugContainer = this.element.ownerDocument.createElement('div');
     this.errorList_.forEach((content) => {
       const logEl = buildLogMessageTemplate(this.element);
       logEl.querySelector('.i-amphtml-story-dev-tools-log-type').textContent =
@@ -242,8 +242,8 @@ export class AmpStoryDevToolsTabLogs extends AMP.BaseElement {
       } else {
         specUrlElement.remove();
       }
-      logsContainer.appendChild(logEl);
+      debugContainer.appendChild(logEl);
     });
-    return logsContainer;
+    return debugContainer;
   }
 }
diff --git a/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-page-experience.css b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-page-experience.css
diff --git a/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-page-experience.js b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-page-experience.js
diff --git a/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-preview.js b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-preview.js
@@ -156,6 +156,13 @@ const buildHelpDialogTemplate = (element) => {
           >
         </div>
         <h1>Helpful links</h1>
+        <a
+          class="i-amphtml-story-dev-tools-device-dialog-link i-amphtml-story-dev-tools-help-page-experience-link"
+          target="_blank"
+          href="https://amp.dev/page-experience/"
+          ><span>Analyze the Page Experience</span>
+          <div class="i-amphtml-story-dev-tools-device-dialog-arrow"></div
+        ></a>
         <a
           class="i-amphtml-story-dev-tools-device-dialog-link"
           target="_blank"
@@ -782,6 +789,11 @@ export class AmpStoryDevToolsTabPreview extends AMP.BaseElement {
     dialog.querySelector(
       '.i-amphtml-story-dev-tools-help-search-preview-link'
     ).href += this.storyUrl_;
+    dialog.querySelector(
+      '.i-amphtml-story-dev-tools-help-page-experience-link'
+    ).href =
+      'https://amp.dev/page-experience/?url=' +
+      encodeURIComponent(this.storyUrl_);
 
     this.mutateElement(() => this.element.appendChild(dialog));
     addAttributeAfterTimeout(this, dialog, 1, 'active');

diff --git a/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools.css b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools.css
@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 
-@import './amp-story-dev-tools-tab-logs.css';
-@import './amp-story-dev-tools-tab-page-experience.css';
+@import './amp-story-dev-tools-tab-debug.css';
 @import './amp-story-dev-tools-tab-preview.css';
 
 amp-story-dev-tools {

diff --git a/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools.js b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools.js
@@ -15,13 +15,9 @@
  */
 
 import {
-  AmpStoryDevToolsTabLogs,
-  createTabLogsElement,
-} from './amp-story-dev-tools-tab-logs';
-import {
-  AmpStoryDevToolsTabPageExperience,
-  createTabPageExperienceElement,
-} from './amp-story-dev-tools-tab-page-experience';
+  AmpStoryDevToolsTabDebug,
+  createTabDebugElement,
+} from './amp-story-dev-tools-tab-debug';
 import {
   AmpStoryDevToolsTabPreview,
   createTabPreviewElement,
@@ -103,8 +99,7 @@ const buildContainerTemplate = (element) => {
 /** @enum {string} */
 const DevToolsTab = {
   PREVIEW: 'Preview',
-  LOGS: 'Logs',
-  PAGE_EXPERIENCE: 'Page Experience',
+  DEBUG: 'Debug',
 };
 
 export class AmpStoryDevTools extends AMP.BaseElement {
@@ -213,10 +208,7 @@ export class AmpStoryDevTools extends AMP.BaseElement {
       this.storyUrl_,
       this.hashParams_['devices']
     );
-    this.tabContents_[
-      DevToolsTab.PAGE_EXPERIENCE
-    ] = createTabPageExperienceElement(this.win, this.storyUrl_);
-    this.tabContents_[DevToolsTab.LOGS] = createTabLogsElement(
+    this.tabContents_[DevToolsTab.DEBUG] = createTabDebugElement(
       this.win,
       this.storyUrl_
     );
@@ -272,10 +264,9 @@ export class AmpStoryDevTools extends AMP.BaseElement {
 
 AMP.extension('amp-story-dev-tools', '0.1', (AMP) => {
   AMP.registerElement('amp-story-dev-tools', AmpStoryDevTools, CSS);
-  AMP.registerElement('amp-story-dev-tools-tab-logs', AmpStoryDevToolsTabLogs);
   AMP.registerElement(
-    'amp-story-dev-tools-tab-page-experience',
-    AmpStoryDevToolsTabPageExperience
+    'amp-story-dev-tools-tab-debug',
+    AmpStoryDevToolsTabDebug
   );
   AMP.registerElement(
     'amp-story-dev-tools-tab-preview',