@react-native/debugger-frontend/dist/third-party/front_end/panels/whats_new/whats_new.js

Debugger frontend for React Native based on Chrome DevTools

import*as e from"../../ui/components/markdown_view/markdown_view.js";import*as t from"../../core/i18n/i18n.js";import*as s from"../../third_party/marked/marked.js";import"../../ui/components/buttons/buttons.js";import*as i from"../../ui/legacy/legacy.js";import{render as o,html as n}from"../../ui/lit/lit.js";import*as r from"../../ui/visual_logging/visual_logging.js";import*as a from"../../core/common/common.js";import*as l from"../../core/host/host.js";let c=!1;function d(){if(!c){for(const{key:t,link:s}of v.markdownLinks)e.MarkdownLinksMap.markdownLinks.set(t,s);c=!0}return v}let v={version:77,header:"What's new in DevTools 136",markdownLinks:[{key:"perf-insights",link:"https://developer.chrome.com/blog/new-in-devtools-136/#perf-insights"},{key:"click-to-highlight",link:"https://developer.chrome.com/blog/new-in-devtools-136/#click-to-highlight"},{key:"cookies-filter",link:"https://developer.chrome.com/blog/new-in-devtools-136/#cookies-filter"}],videoLinks:[{description:"See the highlights from Chrome 136",link:"https://developer.chrome.com/blog/new-in-devtools-136",type:"WhatsNew"}],link:"https://developer.chrome.com/blog/new-in-devtools-136/"};var h=Object.freeze({__proto__:null,getReleaseNote:d,setReleaseNoteForTest:function(e){v=e}}),g={cssText:`.whatsnew{background:var(--sys-color-header-container);flex-grow:1;flex-shrink:0;display:flex;justify-content:center}.whatsnew-content{max-width:var(--sys-size-35);padding:var(--sys-size-9) 0 0;display:flex;flex-direction:column;gap:var(--sys-size-9);>*{padding:0 var(--sys-size-9)}}.header{display:flex;align-items:center;font:var(--sys-typescale-headline4);&::before{content:"";width:var(--sys-size-9);height:var(--sys-size-9);transform:scale(1.6);margin:0 var(--sys-size-8) 0 var(--sys-size-4);background-image:var(--image-file-devtools);flex-shrink:0}}.feature-container{flex-grow:1;padding:0;background-color:var(--sys-color-surface);border-radius:var(--sys-shape-corner-large) var(--sys-shape-corner-large) 0 0;display:flex;flex-direction:column}.feature{background-color:var(--sys-color-surface3);padding:0 var(--sys-size-8) var(--sys-size-8);border-radius:var(--sys-shape-corner-medium);margin:0 var(--sys-size-9) var(--sys-size-9)}.video-container{margin-bottom:var(--sys-size-9);&:has(.video){--video-bottom-padding:var(--sys-size-6);overflow:auto;display:flex;flex-direction:row;gap:var(--sys-size-5);padding:var(--sys-size-9) var(--sys-size-9) var(--video-bottom-padding);margin-bottom:calc(var(--sys-size-9) - var(--video-bottom-padding));> *{min-width:auto}}}.video{align-items:center;display:flex;flex-direction:row;border-radius:var(--sys-shape-corner-medium);background-color:var(--sys-color-surface3);font:var(--sys-typescale-body5-regular);min-width:var(--sys-size-29);max-width:var(--sys-size-32);overflow:hidden;height:72px;&:hover{box-shadow:var(--sys-elevation-level3)}.thumbnail{border-radius:var(--sys-shape-corner-medium) 0 0 var(--sys-shape-corner-medium);flex-shrink:0}.thumbnail-description{--description-margin:var(--sys-size-6);margin:var(--description-margin);height:calc(100% - var(--description-margin) * 2);overflow:hidden}}@media (forced-colors: active){.feature,\n  .video{border:var(--sys-size-1) solid ButtonText}}\n/*# sourceURL=${import.meta.resolve("./releaseNoteView.css")} */\n`};const m={seeFeatures:"See all new features"},u=t.i18n.registerUIStrings("panels/whats_new/ReleaseNoteView.ts",m),p=t.i18n.getLocalizedString.bind(void 0,u),w="../../Images/whatsnew.svg",f="../../Images/devtools-tips.svg",y="../../Images/devtools-thumbnail.svg";async function k(){const e=await b.getFileContent(),t=s.Marked.lexer(e),i=[];let o=Number.MAX_SAFE_INTEGER;return t.forEach((e=>{"heading"===e.type&&o>=e.depth?(i.push([e]),o=e.depth):i.length>0?i[i.length-1].push(e):i.push([e])})),i}class b extends i.Widget.VBox{#e;constructor(e,t=(e,t,s)=>{this.registerRequiredCSS(g);const i=e.getReleaseNote(),a=e.markdownContent;o(n`
      <div class="whatsnew" jslog=${r.section().context("release-notes")}>
        <div class="whatsnew-content">
          <div class="header">
            ${i.header}
          </div>
          <div>
            <devtools-button
                  .variant=${"primary"}
                  .jslogContext=${"learn-more"}
                  @click=${()=>e.openNewTab(i.link)}
              >${p(m.seeFeatures)}</devtools-button>
          </div>

          <div class="feature-container">
            <div class="video-container">
              ${i.videoLinks.map((t=>n`
                  <x-link
                  href=${t.link}
                  jslog=${r.link().track({click:!0}).context("learn-more")}>
                    <div class="video">
                      <img class="thumbnail" src=${e.getThumbnailPath(t.type??"WhatsNew")}>
                      <div class="thumbnail-description"><span>${t.description}</span></div>
                    </div>
                </x-link>
                `))}
            </div>
            ${a.map((e=>n`<div class="feature"><devtools-markdown-view slot="content" .data=${{tokens:e}}></devtools-markdown-view></div>`))}
          </div>
        </div>
      </div>
    `,s,{host:this})}){super(!0,void 0,e),this.element.setAttribute("jslog",`${r.panel().context("whats-new")}`),this.#e=t,this.requestUpdate()}static async getFileContent(){const e=new URL("./resources/WNDT.md",import.meta.url);try{const t=await fetch(e.toString());return await t.text()}catch{throw new Error(`Markdown file ${e.toString()} not found. Make sure it is correctly listed in the relevant BUILD.gn files.`)}}async performUpdate(){const e=await k();this.#e({getReleaseNote:d,openNewTab:i.UIUtils.openInNewTab,markdownContent:e,getThumbnailPath:this.#t},this,this.contentElement)}#t(e){let t;switch(e){case"WhatsNew":t=w;break;case"DevtoolsTips":t=f;break;case"Other":t=y}return new URL(t,import.meta.url).toString()}}var N=Object.freeze({__proto__:null,DEVTOOLS_TIPS_THUMBNAIL:f,GENERAL_THUMBNAIL:y,ReleaseNoteView:b,WHATS_NEW_THUMBNAIL:w,getMarkdownContent:k});const x="releaseNoteVersionSeen",S="release-note";let z,_,T,I;function j(){return function(e,t,s){const o=a.Settings.Settings.instance().createSetting(x,0);if(!e)return o.set(t),!1;if(!s)return!1;if(e>=t)return!1;return o.set(t),i.ViewManager.ViewManager.instance().showView(S,!0),!0}(a.Settings.Settings.instance().createSetting(x,0).get(),d().version,a.Settings.Settings.instance().moduleSetting("help.show-release-note").get())}class L{static instance(e={forceNew:null}){const{forceNew:t}=e;return _&&!t||(_=new L),_}async run(){l.InspectorFrontendHost.isUnderTest()||j()}}class R{handleAction(e,t){const s=d();return i.UIUtils.openInNewTab(s.link),!0}static instance(e={forceNew:null}){const{forceNew:t}=e;return T&&!t||(T=new R),T}}class U{handleAction(e,t){return i.UIUtils.openInNewTab("https://goo.gle/devtools-bug"),!0}static instance(e={forceNew:null}){const{forceNew:t}=e;return I&&!t||(I=new U),I}}var $=Object.freeze({__proto__:null,HelpLateInitialization:L,ReleaseNotesActionDelegate:R,ReportIssueActionDelegate:U,getReleaseNoteVersionSetting:function(){return z||(z=a.Settings.Settings.instance().createSetting(x,0)),z},releaseNoteViewId:S,releaseVersionSeen:x,showReleaseNoteIfNeeded:j});export{h as ReleaseNoteText,N as ReleaseNoteView,$ as WhatsNew};