API tools faq
paste
Advertisement
goldnera

newtabpage

goldnera
May 25th, 2023
90
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 143.08 KB | None | 0 0
raw download clone embed print report
  1. import{PageHandler,PageCallbackRouter,NavigationPredictor,SideType}from"chrome://resources/cr_components/omnibox/omnibox.mojom-webui.js";import{g as getFaviconForPageURL,s as sanitizeInnerHtml,a as assert,d as decodeString16$1,h as hasKeyModifiers,m as mojoTimeDelta,b as mojoString16,W as WindowProxy,E as EventTracker,N as NewTabPageProxy,c as skColorToRgba,$ as $$,i as isWindows,e as assertNotReached,f as strictQuery,F as FocusOutlineManager,r as recordVoiceAction,A as Action,j as recordLoadDuration,k as hexColorToSkColor,C as Command,B as BrowserCommandProxy,l as CustomizeDialogPage}from"./shared.rollup.js";export{n as CrAutoImgElement,I as IframeElement,u as VoiceError,t as createScrollBorders,o as recordDuration,p as recordOccurence,q as recordPerdecage}from"./shared.rollup.js";import{html,PolymerElement,dedupingMixin}from"chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js";export{DomIf}from"chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js";import{loadTimeData}from"chrome://resources/js/load_time_data.js";import{mojo}from"chrome://resources/mojo/mojo/public/js/bindings.js";import{TimeDeltaSpec}from"chrome://resources/mojo/mojo/public/mojom/base/time.mojom-webui.js";import"./strings.m.js";import{DoodleShareChannel,DoodleImageType,NtpBackgroundImageSource,CustomizeChromeSection}from"./new_tab_page.mojom-webui.js";import{PageCallbackRouter as PageCallbackRouter$1,PageHandler as PageHandler$1}from"chrome://resources/cr_components/color_change_listener/color_change_listener.mojom-webui.js";
  2. // Copyright 2020 The Chromium Authors
  3. let instance$5=null;class RealboxBrowserProxy{static getInstance(){return instance$5||(instance$5=new RealboxBrowserProxy)}static setInstance(newInstance){instance$5=newInstance}constructor(){this.handler=PageHandler.getRemote();this.callbackRouter=new PageCallbackRouter;this.handler.setPage(this.callbackRouter.$.bindNewPipeAndPassRemote())}}function getTemplate$8(){return html`<!--_html_template_start_--><style>
  4.   :host {
  5.     align-items: center;
  6.     display: flex;
  7.     flex-shrink: 0;
  8.     justify-content: center;
  9.     width: 32px;
  10.   }
  11.  
  12.   #container {
  13.     align-items: center;
  14.     border-radius: 8px;
  15.     display: flex;
  16.     height: 32px;
  17.     justify-content: center;
  18.     overflow: hidden;
  19.     width: 32px;
  20.   }
  21.  
  22.   /* Entities may feature a dominant color background until image loads. */
  23.   :host-context(cr-realbox-match[has-image]) #container {
  24.     background-color: var(--container-bg-color);
  25.   }
  26.  
  27.   /* Calculator answer and suggestion answer icons feature a blue background. */
  28.   :host-context(cr-realbox-match[is-rich-suggestion]:not([has-image])) #container {
  29.     background-color: var(--google-blue-600);
  30.     border-radius: 50%;
  31.     height: 24px;
  32.     width: 24px;
  33.   }
  34.  
  35.   #image {
  36.     display: none;
  37.     max-height: 32px;
  38.     max-width: 32px;
  39.   }
  40.  
  41.   :host-context(cr-realbox-match[has-image]) #image {
  42.     display: initial;
  43.   }
  44.  
  45.   :host([is-answer]) #image {
  46.     max-height: 24px;
  47.     max-width: 24px;
  48.   }
  49.  
  50.   #icon {
  51.     -webkit-mask-position: center;
  52.     -webkit-mask-repeat: no-repeat;
  53.     -webkit-mask-size: 16px;
  54.     background-color: var(--color-realbox-search-icon-background);
  55.     background-position: center center;
  56.     background-repeat: no-repeat;
  57.     background-size: 16px;
  58.     height: 24px;
  59.     width: 24px;
  60.   }
  61.  
  62.   :host-context(cr-realbox-match[has-image]) #icon {
  63.     display: none;
  64.   }
  65.  
  66.   :host-context(cr-realbox-match[is-rich-suggestion]) #icon {
  67.     background-color: white;
  68.   }
  69.  
  70.   :host([in-searchbox][background-image*='//resources/cr_components/omnibox/icons/google_g.svg']) #icon {
  71.     background-size: 24px;
  72.   }
  73.  
  74.   :host([in-searchbox][mask-image*='//resources/images/icon_search.svg']) #icon {
  75.     -webkit-mask-size: 20px;  /* Loupe in realbox is larger than in matches. */
  76.   }
  77. </style>
  78. <div id="container" style="--container-bg-color:
  79.    [[containerBgColor_(match.imageDominantColor, imageLoading_)]];">
  80.   <img id="image" src="[[imageSrc_]]" on-load="onImageLoad_"></img>
  81.   <!--Note: Do not remove the '$' in '$=' below, otherwise the 'style' attribute
  82.       is erroneously removed by the HTML minifier. -->
  83.   <div id="icon" style$="[[iconStyle_]]"></div>
  84. </div>
  85. <!--_html_template_end_-->`}
  86. // Copyright 2020 The Chromium Authors
  87. const DOCUMENT_MATCH_TYPE="document";const HISTORY_CLUSTER_MATCH_TYPE="history-cluster";class RealboxIconElement extends PolymerElement{static get is(){return"cr-realbox-icon"}static get template(){return getTemplate$8()}static get properties(){return{backgroundImage:{type:String,computed:`computeBackgroundImage_(match.*)`,reflectToAttribute:true},defaultIcon:{type:String,value:""},inSearchbox:{type:Boolean,value:false,reflectToAttribute:true},isAnswer:{type:Boolean,computed:`computeIsAnswer_(match)`,reflectToAttribute:true},maskImage:{type:String,computed:`computeMaskImage_(match)`,reflectToAttribute:true},match:{type:Object},iconStyle_:{type:String,computed:`computeIconStyle_(backgroundImage, maskImage)`},imageSrc_:{type:String,computed:`computeImageSrc_(match.imageUrl, match)`,observer:"onImageSrcChanged_"},imageLoading_:{type:Boolean,value:false}}}computeBackgroundImage_(){if(this.match&&!this.match.isSearchType){if(this.match.type!==DOCUMENT_MATCH_TYPE&&this.match.type!==HISTORY_CLUSTER_MATCH_TYPE){return getFaviconForPageURL(this.match.destinationUrl.url,false,"",32,true)}if(this.match.type===DOCUMENT_MATCH_TYPE){return`url(${this.match.iconUrl})`}}if(this.defaultIcon==="//resources/cr_components/omnibox/icons/google_g.svg"){return`url(${this.defaultIcon})`}return""}computeIsAnswer_(){return this.match&&!!this.match.answer}computeMaskImage_(){if(this.match&&(!this.match.isRichSuggestion||!this.inSearchbox)){return`url(${this.match.iconUrl})`}else{return`url(${this.defaultIcon})`}}computeIconStyle_(){if(this.backgroundImage){return`background-image: ${this.backgroundImage};`+`background-color: transparent;`}else{return`-webkit-mask-image: ${this.maskImage};`}}computeImageSrc_(){const imageUrl=this.match?.imageUrl;if(!imageUrl){return""}if(imageUrl.startsWith("data:image/")){return imageUrl}return`//image?staticEncode=true&encodeType=webp&url=${imageUrl}`}containerBgColor_(imageDominantColor,imageLoading){return imageLoading&&imageDominantColor?`${imageDominantColor}40`:"transparent"}onImageSrcChanged_(){this.imageLoading_=!!this.imageSrc_}onImageLoad_(){this.imageLoading_=false}}customElements.define(RealboxIconElement.is,RealboxIconElement);function getTemplate$7(){return html`<!--_html_template_start_--><style import="cr-shared-style">
  88.   :host {
  89.     --action-height: 32px;
  90.     border: solid 1px var(--google-grey-400);
  91.     border-radius: calc(var(--action-height) / 2);
  92.     display: flex;
  93.     height: var(--action-height);
  94.     min-width: 0;
  95.     outline: none;
  96.     padding-inline-end: 16px;
  97.     padding-inline-start: 12px;
  98.   }
  99.  
  100.   .contents {
  101.     align-items: center;
  102.     display: flex;
  103.     min-width: 0;
  104.   }
  105.  
  106.   #action-icon {
  107.     flex-shrink: 0;
  108.     height: var(--cr-icon-size);
  109.     width: var(--cr-icon-size);
  110.   }
  111.  
  112.   #text {
  113.     overflow: hidden;
  114.     padding-inline-start: 8px;
  115.     text-overflow: ellipsis;
  116.     white-space: nowrap;
  117.   }
  118.  
  119.   :host(:hover) {
  120.     background-color: var(--action-bg-hovered,
  121.                           rgba(var(--google-grey-900-rgb), .1));
  122.   }
  123.  
  124.   :host-context(.focus-outline-visible):host(:focus) {
  125.     border: solid 1px transparent;
  126.     box-shadow: inset 0 0 0 2px var(--google-blue-600);
  127.   }
  128.  
  129. </style>
  130. <div class="contents" title="[[tooltip_]]">
  131.   <img id="action-icon" src$="[[action.iconUrl]]">
  132.   <div id="text" inner-h-t-m-l="[[hintHtml_]]"></div>
  133. </div>
  134.  
  135. <!--_html_template_end_-->`}
  136. // Copyright 2022 The Chromium Authors
  137. // Use of this source code is governed by a BSD-style license that can be
  138. // found in the LICENSE file.
  139. function decodeString16(str){return str?str.data.map((ch=>String.fromCodePoint(ch))).join(""):""}function mojoTimeTicks(timeTicks){return{internalValue:BigInt(Math.floor(timeTicks*1e3))}}
  140. // Copyright 2021 The Chromium Authors
  141. class RealboxActionElement extends PolymerElement{static get is(){return"cr-realbox-action"}static get template(){return getTemplate$7()}static get properties(){return{action:{type:Object},matchIndex:{type:Number,value:-1},ariaLabel:{type:String,computed:`computeAriaLabel_(action)`,reflectToAttribute:true},hintHtml_:{type:String,computed:`computeHintHtml_(action)`},tooltip_:{type:String,computed:`computeTooltip_(action)`}}}computeAriaLabel_(){if(this.action.a11yLabel){return decodeString16(this.action.a11yLabel)}return""}computeHintHtml_(){if(this.action.hint){return sanitizeInnerHtml(decodeString16(this.action.hint))}return window.trustedTypes.emptyHTML}computeTooltip_(){if(this.action.suggestionContents){return decodeString16(this.action.suggestionContents)}return""}}customElements.define(RealboxActionElement.is,RealboxActionElement);const styleMod=document.createElement("dom-module");styleMod.appendChild(html`
  142.   <template>
  143.     <style>
  144.  
  145. .action-icon {
  146.   --cr-icon-button-active-background-color:
  147.       var(--color-new-tab-page-active-background);
  148.   --cr-icon-button-fill-color: var(--color-realbox-results-icon);
  149.   --cr-icon-button-focus-outline-color:
  150.       var(--color-realbox-results-icon-focused-outline);
  151.   --cr-icon-button-hover-background-color:
  152.       var(--color-realbox-results-control-background-hovered);
  153.   --cr-icon-button-icon-size: 16px;
  154.   --cr-icon-button-margin-end: 0;
  155.   --cr-icon-button-margin-start: 0;
  156.   --cr-icon-button-size: 24px;
  157. }
  158.     </style>
  159.   </template>
  160. `.content);styleMod.register("realbox-dropdown-shared-style");function getTemplate$6(){return html`<!--_html_template_start_--><style include="cr-hidden-style cr-icons realbox-dropdown-shared-style">
  161.   :host {
  162.     display: block;
  163.     outline: none;
  164.   }
  165.  
  166.   #action {
  167.     margin-inline-start: 40px; /* icon width + text padding */
  168.   }
  169.  
  170.   .container {
  171.     align-items: center;
  172.     cursor: default;
  173.     display: flex;
  174.     overflow: hidden;
  175.     padding-bottom: 6px;
  176.     padding-inline-end: 16px;
  177.     padding-inline-start: 12px;
  178.     padding-top: 6px;
  179.     position: relative;
  180.   }
  181.  
  182.   .container + .container {
  183.     padding-bottom: 12px;
  184.     padding-top: 0;
  185.   }
  186.  
  187.   #contents,
  188.   #description {
  189.     overflow: hidden;
  190.     text-overflow: ellipsis;
  191.   }
  192.  
  193.   #ellipsis {
  194.     inset-inline-end: 0;
  195.     position: absolute;
  196.   }
  197.  
  198.   #focus-indicator {
  199.     background-color: var(--google-blue-600);
  200.     border-radius: 3px;
  201.     display: none;
  202.     height: 100%;
  203.     margin-inline-start: -15px; /* -1 * (.container padding + width / 2) */
  204.     position: absolute;
  205.     width: 6px;
  206.   }
  207.  
  208.   :host(:is(:focus-visible, [selected]:not(:focus-within))) #focus-indicator {
  209.     display: block;
  210.   }
  211.  
  212.   #prefix {
  213.     opacity: 0;
  214.   }
  215.  
  216.   #separator {
  217.     white-space: pre;
  218.   }
  219.  
  220.   #tail-suggest-prefix {
  221.      position: relative;
  222.   }
  223.  
  224.   #text-container {
  225.     align-items: center;
  226.     display: flex;
  227.     flex-grow: 1;
  228.     overflow: hidden;
  229.     padding-inline-end: 8px;
  230.     padding-inline-start: 8px;
  231.     white-space: nowrap;
  232.   }
  233.  
  234.   :host([is-rich-suggestion]) #text-container {
  235.     align-items: flex-start;
  236.     flex-direction: column;
  237.   }
  238.  
  239.   :host([is-rich-suggestion]) #separator {
  240.     display: none;
  241.   }
  242.  
  243.   :host([is-rich-suggestion]) #contents,
  244.   :host([is-rich-suggestion]) #description {
  245.     width: 100%;
  246.   }
  247.  
  248.   /* Deemphasizes description for entities with images. */
  249.   :host([is-entity-suggestion][has-image]) #description {
  250.     font-size: .875em;
  251.   }
  252.  
  253.   .match {
  254.     font-weight: 500;
  255.   }
  256.  
  257.   /* Uses a dimmed color for description for entities. */
  258.   :host([is-entity-suggestion]) #description,
  259.   .dim {
  260.     color: var(--color-realbox-results-foreground-dimmed);
  261.   }
  262.  
  263.   /* Uses a dimmed color for description for entities. */
  264.   :host-context(cr-realbox-match:-webkit-any(:focus-within, [selected])):host([is-entity-suggestion]) #description,
  265.   :host-context(cr-realbox-match:-webkit-any(:focus-within, [selected])) .dim {
  266.     color: var(--color-realbox-results-dim-selected);
  267.   }
  268.  
  269.   .url {
  270.     color: var(--color-realbox-results-url);
  271.   }
  272.  
  273.   :host-context(cr-realbox-match:-webkit-any(:focus-within, [selected])) .url {
  274.     color: var(--color-realbox-results-url-selected);
  275.   }
  276.  
  277.   #remove {
  278.     margin-inline-end: 1px;
  279.     opacity: 0; /* Hides the button while keeping it in tab order. */
  280.   }
  281.  
  282.   :host-context(cr-realbox-match:hover) #remove {
  283.     opacity: 1;
  284.   }
  285.  
  286.   :host-context(cr-realbox-match:-webkit-any(:focus-within, [selected])) #remove {
  287.     --cr-icon-button-fill-color:
  288.         var(--color-realbox-results-icon-selected);
  289.     opacity: 1;
  290.   }
  291.  
  292. </style>
  293. <div class="container" aria-hidden="true">
  294.   <div id="focus-indicator"></div>
  295.   <cr-realbox-icon id="icon" match="[[match]]"></cr-realbox-icon>
  296.   <div id="text-container">
  297.     <span id="tail-suggest-prefix" hidden$="[[!tailSuggestPrefix_]]">
  298.       <span id="prefix">[[tailSuggestPrefix_]]</span>
  299.       <!-- This is equivalent to AutocompleteMatch::kEllipsis which is
  300.            prepended to the match content in other surfaces-->
  301.       <span id="ellipsis">...&nbsp</span>
  302.     </span>
  303.     <span id="contents" inner-h-t-m-l="[[contentsHtml_]]"></span>
  304.     <span id="separator" class="dim">[[separatorText_]]</span>
  305.     <span id="description" inner-h-t-m-l="[[descriptionHtml_]]"></span>
  306.   </div>
  307.   <cr-icon-button id="remove" class="action-icon icon-clear"
  308.     aria-label="[[removeButtonAriaLabel_]]"
  309.     on-click="onRemoveButtonClick_" on-mousedown="onRemoveButtonMouseDown_"
  310.     title="[[removeButtonTitle_]]" hidden$="[[!match.supportsDeletion]]"
  311.     tabindex="2">
  312.   </cr-icon-button>
  313. </div>
  314. <template is="dom-if" if="[[actionIsVisible_]]">
  315.   <div class="container" aria-hidden="true">
  316.     <cr-realbox-action id="action" action="[[match.action]]"
  317.                      tabindex="1" on-click="onActionClick_"
  318.                      on-keydown="onActionKeyDown_">
  319.     </cr-realbox-action>
  320.   </div>
  321. </template>
  322. <!--_html_template_end_-->`}
  323. // Copyright 2020 The Chromium Authors
  324. var AcMatchClassificationStyle;(function(AcMatchClassificationStyle){AcMatchClassificationStyle[AcMatchClassificationStyle["NONE"]=0]="NONE";AcMatchClassificationStyle[AcMatchClassificationStyle["URL"]=1]="URL";AcMatchClassificationStyle[AcMatchClassificationStyle["MATCH"]=2]="MATCH";AcMatchClassificationStyle[AcMatchClassificationStyle["DIM"]=4]="DIM"})(AcMatchClassificationStyle||(AcMatchClassificationStyle={}));const ENTITY_MATCH_TYPE="search-suggest-entity";class RealboxMatchElement extends PolymerElement{static get is(){return"cr-realbox-match"}static get template(){return getTemplate$6()}static get properties(){return{ariaLabel:{type:String,computed:`computeAriaLabel_(match.a11yLabel)`,reflectToAttribute:true},hasImage:{type:Boolean,computed:`computeHasImage_(match)`,reflectToAttribute:true},isEntitySuggestion:{type:Boolean,computed:`computeIsEntitySuggestion_(match)`,reflectToAttribute:true},isRichSuggestion:{type:Boolean,computed:`computeIsRichSuggestion_(match)`,reflectToAttribute:true},match:Object,matchIndex:{type:Number,value:-1},sideType:Number,actionIsVisible_:{type:Boolean,computed:`computeActionIsVisible_(match)`},contentsHtml_:{type:String,computed:`computeContentsHtml_(match)`},descriptionHtml_:{type:String,computed:`computeDescriptionHtml_(match)`},removeButtonAriaLabel_:{type:String,computed:`computeRemoveButtonAriaLabel_(match.removeButtonA11yLabel)`},removeButtonTitle_:{type:String,value:()=>loadTimeData.getString("removeSuggestion")},separatorText_:{type:String,computed:`computeSeparatorText_(match)`},tailSuggestPrefix_:{type:String,computed:`computeTailSuggestPrefix_(match)`}}}constructor(){super();this.pageHandler_=RealboxBrowserProxy.getInstance().handler}ready(){super.ready();this.addEventListener("click",(event=>this.onMatchClick_(event)));this.addEventListener("focusin",(()=>this.onMatchFocusin_()));this.addEventListener("mousedown",(()=>this.onMatchMouseDown_()))}executeAction_(e){this.pageHandler_.executeAction(this.matchIndex,mojoTimeTicks(Date.now()),e.button||0,e.altKey,e.ctrlKey,e.metaKey,e.shiftKey)}onActionClick_(e){this.executeAction_(e);e.preventDefault();e.stopPropagation()}onActionKeyDown_(e){if(e.key&&(e.key==="Enter"||e.key===" ")){this.onActionClick_(e)}}onMatchClick_(e){if(e.button>1){return}this.dispatchEvent(new CustomEvent("match-click",{bubbles:true,composed:true,detail:{index:this.matchIndex,event:e}}));e.preventDefault();e.stopPropagation()}onMatchFocusin_(){this.dispatchEvent(new CustomEvent("match-focusin",{bubbles:true,composed:true,detail:this.matchIndex}))}onMatchMouseDown_(){this.pageHandler_.onNavigationLikely(this.matchIndex,NavigationPredictor.kMouseDown)}onRemoveButtonClick_(e){if(e.button!==0){return}this.dispatchEvent(new CustomEvent("match-remove",{bubbles:true,composed:true,detail:this.matchIndex}));e.preventDefault();e.stopPropagation()}onRemoveButtonMouseDown_(e){e.preventDefault()}computeAriaLabel_(){if(!this.match){return""}return decodeString16(this.match.a11yLabel)}sanitizeInnerHtml_(html){return sanitizeInnerHtml(html,{attrs:["class"]})}computeContentsHtml_(){if(!this.match){return window.trustedTypes.emptyHTML}const match=this.match;const matchContents=match.answer?match.answer.firstLine:match.contents;return match.swapContentsAndDescription?this.sanitizeInnerHtml_(this.renderTextWithClassifications_(decodeString16(match.description),match.descriptionClass).innerHTML):this.sanitizeInnerHtml_(this.renderTextWithClassifications_(decodeString16(matchContents),match.contentsClass).innerHTML)}computeDescriptionHtml_(){if(!this.match){return window.trustedTypes.emptyHTML}const match=this.match;if(match.answer){return this.sanitizeInnerHtml_(decodeString16(match.answer.secondLine))}return match.swapContentsAndDescription?this.sanitizeInnerHtml_(this.renderTextWithClassifications_(decodeString16(match.contents),match.contentsClass).innerHTML):this.sanitizeInnerHtml_(this.renderTextWithClassifications_(decodeString16(match.description),match.descriptionClass).innerHTML)}computeTailSuggestPrefix_(){if(!this.match||!this.match.tailSuggestCommonPrefix){return""}const prefix=decodeString16(this.match.tailSuggestCommonPrefix);if(prefix.slice(-1)===" "){return prefix.slice(0,-1)+"Â "}return prefix}computeHasImage_(){return this.match&&!!this.match.imageUrl}computeIsEntitySuggestion_(){return this.match&&this.match.type===ENTITY_MATCH_TYPE}computeIsRichSuggestion_(){return this.match&&this.match.isRichSuggestion}computeActionIsVisible_(){return this.match&&!!this.match.action}computeRemoveButtonAriaLabel_(){if(!this.match){return""}return decodeString16(this.match.removeButtonA11yLabel)}computeSeparatorText_(){return this.match&&decodeString16(this.match.description)?loadTimeData.getString("realboxSeparator"):""}convertClassificationStyleToCssClasses_(style){const classes=[];if(style&AcMatchClassificationStyle.DIM){classes.push("dim")}if(style&AcMatchClassificationStyle.MATCH){classes.push("match")}if(style&AcMatchClassificationStyle.URL){classes.push("url")}return classes}createSpanWithClasses_(text,classes){const span=document.createElement("span");if(classes.length){span.classList.add(...classes)}span.textContent=text;return span}renderTextWithClassifications_(text,classifications){return classifications.map((({offset:offset,style:style},index)=>{const next=classifications[index+1]||{offset:text.length};const subText=text.substring(offset,next.offset);const classes=this.convertClassificationStyleToCssClasses_(style);return this.createSpanWithClasses_(subText,classes)})).reduce(((container,currentElement)=>{container.appendChild(currentElement);return container}),document.createElement("span"))}}customElements.define(RealboxMatchElement.is,RealboxMatchElement);class PageMetricsHostPendingReceiver{constructor(handle){this.handle=mojo.internal.interfaceSupport.getEndpointForReceiver(handle)}bindInBrowser(scope="context"){mojo.internal.interfaceSupport.bind(this.handle,"metrics_reporter.mojom.PageMetricsHost",scope)}}class PageMetricsHostRemote{constructor(handle){this.proxy=new mojo.internal.interfaceSupport.InterfaceRemoteBase(PageMetricsHostPendingReceiver,handle);this.$=new mojo.internal.interfaceSupport.InterfaceRemoteBaseWrapper(this.proxy);this.onConnectionError=this.proxy.getConnectionErrorEventRouter()}onPageRemoteCreated(page){this.proxy.sendMessage(427276265,PageMetricsHost_OnPageRemoteCreated_ParamsSpec.$,null,[page])}onGetMark(name){return this.proxy.sendMessage(780757674,PageMetricsHost_OnGetMark_ParamsSpec.$,PageMetricsHost_OnGetMark_ResponseParamsSpec.$,[name])}onClearMark(name){this.proxy.sendMessage(1186932673,PageMetricsHost_OnClearMark_ParamsSpec.$,null,[name])}onUmaReportTime(name,time){this.proxy.sendMessage(1348852565,PageMetricsHost_OnUmaReportTime_ParamsSpec.$,null,[name,time])}}class PageMetricsHost{static get $interfaceName(){return"metrics_reporter.mojom.PageMetricsHost"}static getRemote(){let remote=new PageMetricsHostRemote;remote.$.bindNewPipeAndPassReceiver().bindInBrowser();return remote}}class PageMetricsPendingReceiver{constructor(handle){this.handle=mojo.internal.interfaceSupport.getEndpointForReceiver(handle)}bindInBrowser(scope="context"){mojo.internal.interfaceSupport.bind(this.handle,"metrics_reporter.mojom.PageMetrics",scope)}}class PageMetricsRemote{constructor(handle){this.proxy=new mojo.internal.interfaceSupport.InterfaceRemoteBase(PageMetricsPendingReceiver,handle);this.$=new mojo.internal.interfaceSupport.InterfaceRemoteBaseWrapper(this.proxy);this.onConnectionError=this.proxy.getConnectionErrorEventRouter()}onGetMark(name){return this.proxy.sendMessage(106985093,PageMetrics_OnGetMark_ParamsSpec.$,PageMetrics_OnGetMark_ResponseParamsSpec.$,[name])}onClearMark(name){this.proxy.sendMessage(1250804403,PageMetrics_OnClearMark_ParamsSpec.$,null,[name])}}class PageMetricsCallbackRouter{constructor(){this.helper_internal_=new mojo.internal.interfaceSupport.InterfaceReceiverHelperInternal(PageMetricsRemote);this.$=new mojo.internal.interfaceSupport.InterfaceReceiverHelper(this.helper_internal_);this.router_=new mojo.internal.interfaceSupport.CallbackRouter;this.onGetMark=new mojo.internal.interfaceSupport.InterfaceCallbackReceiver(this.router_);this.helper_internal_.registerHandler(106985093,PageMetrics_OnGetMark_ParamsSpec.$,PageMetrics_OnGetMark_ResponseParamsSpec.$,this.onGetMark.createReceiverHandler(true));this.onClearMark=new mojo.internal.interfaceSupport.InterfaceCallbackReceiver(this.router_);this.helper_internal_.registerHandler(1250804403,PageMetrics_OnClearMark_ParamsSpec.$,null,this.onClearMark.createReceiverHandler(false));this.onConnectionError=this.helper_internal_.getConnectionErrorEventRouter()}removeListener(id){return this.router_.removeListener(id)}}const PageMetricsHost_OnPageRemoteCreated_ParamsSpec={$:{}};const PageMetricsHost_OnGetMark_ParamsSpec={$:{}};const PageMetricsHost_OnGetMark_ResponseParamsSpec={$:{}};const PageMetricsHost_OnClearMark_ParamsSpec={$:{}};const PageMetricsHost_OnUmaReportTime_ParamsSpec={$:{}};const PageMetrics_OnGetMark_ParamsSpec={$:{}};const PageMetrics_OnGetMark_ResponseParamsSpec={$:{}};const PageMetrics_OnClearMark_ParamsSpec={$:{}};mojo.internal.Struct(PageMetricsHost_OnPageRemoteCreated_ParamsSpec.$,"PageMetricsHost_OnPageRemoteCreated_Params",[mojo.internal.StructField("page",0,0,mojo.internal.InterfaceProxy(PageMetricsRemote),null,false,0)],[[0,16]]);mojo.internal.Struct(PageMetricsHost_OnGetMark_ParamsSpec.$,"PageMetricsHost_OnGetMark_Params",[mojo.internal.StructField("name",0,0,mojo.internal.String,null,false,0)],[[0,16]]);mojo.internal.Struct(PageMetricsHost_OnGetMark_ResponseParamsSpec.$,"PageMetricsHost_OnGetMark_ResponseParams",[mojo.internal.StructField("markedTime",0,0,TimeDeltaSpec.$,null,true,0)],[[0,16]]);mojo.internal.Struct(PageMetricsHost_OnClearMark_ParamsSpec.$,"PageMetricsHost_OnClearMark_Params",[mojo.internal.StructField("name",0,0,mojo.internal.String,null,false,0)],[[0,16]]);mojo.internal.Struct(PageMetricsHost_OnUmaReportTime_ParamsSpec.$,"PageMetricsHost_OnUmaReportTime_Params",[mojo.internal.StructField("name",0,0,mojo.internal.String,null,false,0),mojo.internal.StructField("time",8,0,TimeDeltaSpec.$,null,false,0)],[[0,24]]);mojo.internal.Struct(PageMetrics_OnGetMark_ParamsSpec.$,"PageMetrics_OnGetMark_Params",[mojo.internal.StructField("name",0,0,mojo.internal.String,null,false,0)],[[0,16]]);mojo.internal.Struct(PageMetrics_OnGetMark_ResponseParamsSpec.$,"PageMetrics_OnGetMark_ResponseParams",[mojo.internal.StructField("markedTime",0,0,TimeDeltaSpec.$,null,true,0)],[[0,16]]);mojo.internal.Struct(PageMetrics_OnClearMark_ParamsSpec.$,"PageMetrics_OnClearMark_Params",[mojo.internal.StructField("name",0,0,mojo.internal.String,null,false,0)],[[0,16]]);
  325. // Copyright 2022 The Chromium Authors
  326. class BrowserProxyImpl{constructor(){this.callbackRouter=new PageMetricsCallbackRouter;this.host=PageMetricsHost.getRemote();this.host.onPageRemoteCreated(this.callbackRouter.$.bindNewPipeAndPassRemote())}getMark(name){return this.host.onGetMark(name)}clearMark(name){this.host.onClearMark(name)}umaReportTime(name,time){this.host.onUmaReportTime(name,time)}now(){return chrome.timeTicks.nowInMicroseconds()}getCallbackRouter(){return this.callbackRouter}static getInstance(){return instance$4||(instance$4=new BrowserProxyImpl)}static setInstance(obj){instance$4=obj}}let instance$4=null;
  327. // Copyright 2022 The Chromium Authors
  328. function timeFromMojo(delta){return delta.microseconds}function timeToMojo(mark){return{microseconds:mark}}class MetricsReporterImpl{constructor(){this.marks_=new Map;this.browserProxy_=BrowserProxyImpl.getInstance();const callbackRouter=this.browserProxy_.getCallbackRouter();callbackRouter.onGetMark.addListener((name=>({markedTime:this.marks_.has(name)?timeToMojo(this.marks_.get(name)):null})));callbackRouter.onClearMark.addListener((name=>this.marks_.delete(name)))}static getInstance(){return instance$3||(instance$3=new MetricsReporterImpl)}static setInstanceForTest(newInstance){instance$3=newInstance}mark(name){this.marks_.set(name,this.browserProxy_.now())}async measure(startMark,endMark){let endTime;if(endMark){const entry=this.marks_.get(endMark);assert(entry,`Mark "${endMark}" does not exist locally.`);endTime=entry}else{endTime=this.browserProxy_.now()}let startTime;if(this.marks_.has(startMark)){startTime=this.marks_.get(startMark)}else{const remoteStartTime=await this.browserProxy_.getMark(startMark);assert(remoteStartTime.markedTime,`Mark "${startMark}" does not exist locally or remotely.`);startTime=timeFromMojo(remoteStartTime.markedTime)}return endTime-startTime}async hasMark(name){if(this.marks_.has(name)){return true}const remoteMark=await this.browserProxy_.getMark(name);return remoteMark!==null&&remoteMark.markedTime!==null}hasLocalMark(name){return this.marks_.has(name)}clearMark(name){this.marks_.delete(name);this.browserProxy_.clearMark(name)}umaReportTime(histogram,time){this.browserProxy_.umaReportTime(histogram,timeToMojo(time))}}let instance$3=null;
  329. // Copyright 2021 The Chromium Authors
  330. function isValidArray(arr){if(arr instanceof Array&&Object.isFrozen(arr)){return true}return false}function getStaticString(literal){const isStaticString=isValidArray(literal)&&!!literal.raw&&isValidArray(literal.raw)&&literal.length===literal.raw.length&&literal.length===1;assert(isStaticString,"static_types.js only allows static strings");return literal.join("")}function createTypes(_ignore,literal){return getStaticString(literal)}const rules={createHTML:createTypes,createScript:createTypes,createScriptURL:createTypes};let staticPolicy;if(window.trustedTypes){staticPolicy=window.trustedTypes.createPolicy("static-types",rules)}else{staticPolicy=rules}function getTrustedHTML(literal){return staticPolicy.createHTML("",literal)}function getTrustedScriptURL(literal){return staticPolicy.createScriptURL("",literal)}function getTemplate$5(){return html`<!--_html_template_start_--><style include="cr-icons realbox-dropdown-shared-style">
  331.   :host {
  332.     user-select: none;
  333.   }
  334.  
  335.   #content {
  336.     background-color: var(--color-realbox-results-background);
  337.     border-radius: calc(0.25 * var(--cr-realbox-height));
  338.     box-shadow: var(--cr-realbox-shadow);
  339.     display: flex;
  340.     margin-bottom: 8px;
  341.     overflow: hidden;
  342.     padding-bottom: 8px;
  343.     padding-top: var(--cr-realbox-height);
  344.   }
  345.  
  346.   :host([round-corners]) #content {
  347.     border-radius: calc(0.5 * var(--cr-realbox-height));
  348.     padding-bottom: 18px;
  349.   }
  350.  
  351.   @media (forced-colors: active) {
  352.     #content {
  353.       border: 1px solid ActiveBorder;
  354.     }
  355.   }
  356.  
  357.   cr-realbox-match {
  358.     color: var(--color-realbox-results-foreground);
  359.   }
  360.  
  361.   .header {
  362.     align-items: center;
  363.     display: flex;
  364.     margin-top: 8px;
  365.     outline: none;
  366.     padding-bottom: 6px;
  367.     padding-inline-end: 16px;
  368.     padding-inline-start: 12px;
  369.     padding-top: 6px;
  370.   }
  371.  
  372.   .header .text {
  373.     color: var(--color-realbox-results-foreground-dimmed);
  374.     cursor: default;
  375.     font-size: .875em;
  376.     font-weight: 500;
  377.     overflow: hidden;
  378.     padding-inline-end: 8px;
  379.     padding-inline-start: 8px;
  380.     text-overflow: ellipsis;
  381.     text-transform: uppercase;
  382.     white-space: nowrap;
  383.   }
  384.  
  385.   .header:focus-within:not(:focus) cr-icon-button {
  386.       --cr-icon-button-fill-color:
  387.           var(--color-realbox-results-icon-selected);
  388.   }
  389.  
  390.   cr-realbox-match:-webkit-any(:hover, :focus-within, [selected]),
  391.   .header:-webkit-any(:hover, :focus-within) {
  392.     background-color:
  393.         var(--color-realbox-results-background-hovered);
  394.   }
  395.  
  396.   @media (forced-colors: active) {
  397.     cr-realbox-match:-webkit-any(:hover, :focus-within, [selected]),
  398.     .header:-webkit-any(:hover, :focus-within) {
  399.       background-color: Highlight;
  400.     }
  401.   }
  402.  
  403.   .primary-side {
  404.     flex: 2 1 var(--cr-realbox-min-width);
  405.     min-width: var(--cr-realbox-min-width);  /* needed for ellipsis. */
  406.   }
  407.  
  408.   .secondary-side {
  409.     display: var(--cr-realbox-secondary-side-display, none);
  410.     flex: 1 0 calc(var(--cr-realbox-width) - var(--cr-realbox-min-width));
  411.   }
  412. </style>
  413. <div id="content">
  414.   <template is="dom-repeat" items="[[sideTypes_(canShowSecondaryMatches)]]"
  415.       as="side">
  416.     <div class$="[[classForSide_(side)]]">
  417.       <template is="dom-repeat" items="[[groupIdsForSide_(side, result.matches.*)]]"
  418.           as="groupId">
  419.         <template is="dom-if" if="[[hasHeaderForGroup_(groupId)]]">
  420.           <!-- Header cannot be tabbed into but gets focus when clicked. This stops
  421.               the dropdown from losing focus and closing as a result. -->
  422.           <div class="header" data-id$="[[groupId]]" tabindex="-1"
  423.               on-focusin="onHeaderFocusin_" on-click="onHeaderClick_"
  424.               aria-hidden="true">
  425.             <span class="text">[[headerForGroup_(groupId)]]</span>
  426.             <cr-icon-button class$="action-icon [[toggleButtonIconForGroup_(groupId, hiddenGroupIds_.*)]]"
  427.                 title="[[toggleButtonTitleForGroup_(groupId, hiddenGroupIds_.*)]]"
  428.                 aria-label$="[[toggleButtonA11yLabelForGroup_(groupId, hiddenGroupIds_.*)]]"
  429.                 on-mousedown="onToggleButtonMouseDown_">
  430.             </cr-icon-button>
  431.           </div>
  432.         </template>
  433.         <template is="dom-if" if="[[!groupIsHidden_(groupId, hiddenGroupIds_.*)]]"
  434.             restamp>
  435.           <template is="dom-repeat"
  436.               items="[[matchesForSide_(side, result.matches.*)]]" as="match"
  437.               filter="[[matchIsInGroupFilter_(groupId)]]"
  438.               on-dom-change="onResultRepaint_">
  439.             <cr-realbox-match tabindex="0" role="option" match="[[match]]"
  440.                 match-index="[[matchIndex_(match)]]"
  441.                 side-type="[[sideTypeForGroup_(groupId)]]"
  442.                 selected$="[[isSelected_(match, selectedMatchIndex)]]">
  443.             </cr-realbox-match>
  444.           </template>
  445.         </template>
  446.       </template>
  447.     </div>
  448.   </template>
  449. </div>
  450. <!--_html_template_end_-->`}
  451. // Copyright 2020 The Chromium Authors
  452. const remainder=(lhs,rhs)=>(lhs%rhs+rhs)%rhs;const CHAR_TYPED_TO_PAINT="Realbox.CharTypedToRepaintLatency.ToPaint";const RESULT_CHANGED_TO_PAINT="Realbox.ResultChangedToRepaintLatency.ToPaint";class RealboxDropdownElement extends PolymerElement{static get is(){return"cr-realbox-dropdown"}static get template(){return getTemplate$5()}static get properties(){return{canShowSecondaryMatches:{type:Boolean,value:false},hadSecondaryMatches:{type:Boolean,value:false,notify:true},hasSecondaryMatches:{type:Boolean,value:false,notify:true},result:{type:Object},roundCorners:{type:Boolean,value:()=>loadTimeData.getBoolean("roundCorners"),reflectToAttribute:true},selectedMatchIndex:{type:Number,value:-1,notify:true},hiddenGroupIds_:{type:Array,computed:`computeHiddenGroupIds_(result)`},selectableMatchElements_:{type:Array,value:()=>[]}}}constructor(){super();this.pageHandler_=RealboxBrowserProxy.getInstance().handler}get selectableMatchElements(){return this.selectableMatchElements_.filter((matchEl=>matchEl.sideType===SideType.kDefaultPrimary||this.canShowSecondaryMatches))}unselect(){this.selectedMatchIndex=-1}focusSelected(){this.selectableMatchElements[this.selectedMatchIndex]?.focus()}selectFirst(){this.selectedMatchIndex=0}selectIndex(index){this.selectedMatchIndex=index}selectPrevious(){const previous=Math.max(this.selectedMatchIndex,0)-1;this.selectedMatchIndex=remainder(previous,this.selectableMatchElements.length)}selectLast(){this.selectedMatchIndex=this.selectableMatchElements.length-1}selectNext(){const next=this.selectedMatchIndex+1;this.selectedMatchIndex=remainder(next,this.selectableMatchElements.length)}onHeaderClick_(e){const groupId=Number.parseInt(e.currentTarget.dataset["id"],10);this.pageHandler_.toggleSuggestionGroupIdVisibility(groupId);const index=this.hiddenGroupIds_.indexOf(groupId);if(index===-1){this.push("hiddenGroupIds_",groupId)}else{this.splice("hiddenGroupIds_",index,1)}}onHeaderFocusin_(){this.dispatchEvent(new CustomEvent("header-focusin",{bubbles:true,composed:true}))}onResultRepaint_(){this.dispatchEvent(new CustomEvent("result-repaint",{bubbles:true,composed:true,detail:window.performance.now()}));const metricsReporter=MetricsReporterImpl.getInstance();metricsReporter.measure("CharTyped").then((duration=>{metricsReporter.umaReportTime(CHAR_TYPED_TO_PAINT,duration)})).then((()=>{metricsReporter.clearMark("CharTyped")})).catch((()=>{}));metricsReporter.measure("ResultChanged").then((duration=>{metricsReporter.umaReportTime(RESULT_CHANGED_TO_PAINT,duration)})).then((()=>{metricsReporter.clearMark("ResultChanged")})).catch((()=>{}));this.selectableMatchElements_=[...this.shadowRoot.querySelectorAll("cr-realbox-match")]}onToggleButtonMouseDown_(e){e.preventDefault()}classForSide_(side){return side===SideType.kDefaultPrimary?"primary-side":"secondary-side"}computeHiddenGroupIds_(){return Object.keys(this.result?.suggestionGroupsMap??{}).map((groupId=>Number.parseInt(groupId,10))).filter((groupId=>this.result.suggestionGroupsMap[groupId].hidden))}isSelected_(match){return this.matchIndex_(match)===this.selectedMatchIndex}groupIdsForSide_(side){return[...new Set(this.result?.matches?.map((match=>match.suggestionGroupId)).filter((groupId=>this.sideTypeForGroup_(groupId)===side)))]}groupIsHidden_(groupId){return this.hiddenGroupIds_.indexOf(groupId)!==-1}hasHeaderForGroup_(groupId){return!!this.headerForGroup_(groupId)}headerForGroup_(groupId){return this.result?.suggestionGroupsMap[groupId]?decodeString16(this.result.suggestionGroupsMap[groupId].header):""}matchIsInGroupFilter_(groupId){return match=>match.suggestionGroupId===groupId}matchIndex_(match){return this.result?.matches?.indexOf(match)??-1}matchesForSide_(side){const matches=(this.result?.matches??[]).filter((match=>this.sideTypeForGroup_(match.suggestionGroupId)===side));if(side===SideType.kSecondary){this.hasSecondaryMatches=!!matches.length;if(!this.hadSecondaryMatches){this.hadSecondaryMatches=this.hasSecondaryMatches}}return matches}sideTypes_(){return this.canShowSecondaryMatches?[SideType.kDefaultPrimary,SideType.kSecondary]:[SideType.kDefaultPrimary]}sideTypeForGroup_(groupId){return this.result?.suggestionGroupsMap[groupId]?.sideType??SideType.kDefaultPrimary}toggleButtonA11yLabelForGroup_(groupId){if(!this.hasHeaderForGroup_(groupId)){return""}return!this.groupIsHidden_(groupId)?decodeString16(this.result.suggestionGroupsMap[groupId].hideGroupA11yLabel):decodeString16(this.result.suggestionGroupsMap[groupId].showGroupA11yLabel)}toggleButtonIconForGroup_(groupId){return this.groupIsHidden_(groupId)?"icon-expand-more":"icon-expand-less"}toggleButtonTitleForGroup_(groupId){return loadTimeData.getString(this.groupIsHidden_(groupId)?"showSuggestions":"hideSuggestions")}}customElements.define(RealboxDropdownElement.is,RealboxDropdownElement);function getTemplate$4(){return html`<!--_html_template_start_--><style include="cr-icons">:host{--cr-realbox-height:44px;--cr-realbox-min-width:var(--ntp-search-box-width);--cr-realbox-shadow:0 1px 6px 0 var(--color-realbox-shadow);--cr-realbox-width:var(--cr-realbox-min-width);--ntp-realbox-border-radius:calc(0.5 * var(--cr-realbox-height));--ntp-realbox-icon-width:26px;--ntp-realbox-inner-icon-margin:8px;--ntp-realbox-voice-icon-offset:16px;border-radius:var(--ntp-realbox-border-radius);box-shadow:var(--cr-realbox-shadow);font-size:16px;height:var(--cr-realbox-height);width:var(--cr-realbox-width)}:host([can-show-secondary-matches][had-secondary-matches]){--cr-realbox-width:calc(var(--cr-realbox-min-width) * 1.5)}:host([can-show-secondary-matches][has-secondary-matches]){--cr-realbox-secondary-side-display:block}:host([is-dark]){--cr-realbox-shadow:0 2px 6px 0 var(--color-realbox-shadow)}:host([realbox-lens-search-enabled_]){--ntp-realbox-voice-icon-offset:53px}@media (forced-colors:active){:host{border:1px solid ActiveBorder}}:host([matches-are-visible]){box-shadow:none}:host([match-searchbox]){box-shadow:none}:host([match-searchbox]:not([matches-are-visible]):hover){border:1px solid transparent;box-shadow:var(--cr-realbox-shadow)}:host([match-searchbox]:not([is-dark]):not([matches-are-visible]):not(:hover)){border:1px solid var(--color-realbox-border)}#inputWrapper{height:100%;position:relative}input{background-color:var(--color-realbox-background);border:none;border-radius:var(--ntp-realbox-border-radius);color:var(--color-realbox-foreground);font-family:inherit;font-size:inherit;height:100%;outline:0;padding-inline-end:calc(var(--ntp-realbox-voice-icon-offset) + var(--ntp-realbox-icon-width) + var(--ntp-realbox-inner-icon-margin));padding-inline-start:52px;position:relative;width:100%}input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none}input::-webkit-search-cancel-button{appearance:none;margin:0}input::placeholder{color:var(--color-realbox-placeholder)}input:focus::placeholder{visibility:hidden}:host([matches-are-visible]) input,input:focus{background-color:var(--color-realbox-results-background)}input:hover{background-color:var(--color-realbox-background-hovered)}cr-realbox-icon{height:100%;left:12px;position:absolute;top:0}:host-context([dir=rtl]) cr-realbox-icon{left:unset;right:12px}.realbox-icon-button{background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:21px 21px;border:none;border-radius:2px;cursor:pointer;height:100%;outline:0;padding:0;pointer-events:auto;position:absolute;right:16px;width:var(--ntp-realbox-icon-width)}:host([single-colored-icons]) #lensSearchButton,:host([single-colored-icons]) #voiceSearchButton{-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:21px 21px;background-color:var(--color-new-tab-page-primary-foreground)}:host([single-colored-icons]) #voiceSearchButton{-webkit-mask-image:url(icons/googlemic_clr_24px.svg)}:host(:not([single-colored-icons])) #voiceSearchButton{background-image:url(icons/googlemic_clr_24px.svg)}:host([single-colored-icons]) #lensSearchButton{-webkit-mask-image:url(chrome://new-tab-page/icons/lens_icon.svg)}:host(:not([single-colored-icons])) #lensSearchButton{background-image:url(chrome://new-tab-page/icons/lens_icon.svg)}:host([realbox-lens-search-enabled_]):host-context([dir=rtl]) #voiceSearchButton{left:var(--ntp-realbox-voice-icon-offset);right:unset}:host([realbox-lens-search-enabled_]) #voiceSearchButton{right:var(--ntp-realbox-voice-icon-offset)}:host-context([dir=rtl]) .realbox-icon-button{left:16px;right:unset}:host-context(.focus-outline-visible) .realbox-icon-button:focus{box-shadow:var(--ntp-focus-shadow)}:-webkit-any(input,cr-realbox-icon,.realbox-icon-button){z-index:100}cr-realbox-dropdown{left:0;position:absolute;right:0;top:0;z-index:99}</style>
  453. <div id="inputWrapper" on-focusout="onInputWrapperFocusout_" on-keydown="onInputWrapperKeydown_">
  454.   <input id="input" type="search" autocomplete="off" spellcheck="false" aria-live="[[inputAriaLive_]]" role="combobox" aria-expanded="[[matchesAreVisible]]" aria-controls="matches" placeholder="Search Google or type a URL" on-copy="onInputCutCopy_" on-cut="onInputCutCopy_" on-focus="onInputFocus_" on-input="onInputInput_" on-keydown="onInputKeydown_" on-keyup="onInputKeyup_" on-mousedown="onInputMouseDown_" on-paste="onInputPaste_">
  455.   <cr-realbox-icon id="icon" match="[[selectedMatch_]]" default-icon="[[realboxIcon_]]" in-searchbox>
  456.   </cr-realbox-icon>
  457.   <button id="voiceSearchButton" class="realbox-icon-button" on-click="onVoiceSearchClick_" title="Search by voice">
  458.   </button>
  459.   <template is="dom-if" if="[[realboxLensSearchEnabled_]]">
  460.     <button id="lensSearchButton" class="realbox-icon-button" on-click="onLensSearchClick_" title="Search by image">
  461.     </button>
  462.   </template>
  463.   <cr-realbox-dropdown id="matches" role="listbox" result="[[result_]]" selected-match-index="{{selectedMatchIndex_}}" can-show-secondary-matches="[[canShowSecondaryMatches]]" had-secondary-matches="{{hadSecondaryMatches}}" has-secondary-matches="{{hasSecondaryMatches}}" on-result-repaint="onResultRepaint_" on-match-focusin="onMatchFocusin_" on-match-click="onMatchClick_" on-match-remove="onMatchRemove_" on-header-focusin="onHeaderFocusin_" hidden$="[[!matchesAreVisible]]">
  464.   </cr-realbox-dropdown>
  465. </div>
  466. <!--_html_template_end_-->`}
  467. // Copyright 2020 The Chromium Authors
  468. const showSecondaryMatchesMediaQueryList=window.matchMedia("(min-width: 900px)");class RealboxElement extends PolymerElement{static get is(){return"ntp-realbox"}static get template(){return getTemplate$4()}static get properties(){return{canShowSecondaryMatches:{type:Boolean,value:()=>showSecondaryMatchesMediaQueryList.matches&&loadTimeData.getBoolean("showSecondarySide"),reflectToAttribute:true},hadSecondaryMatches:{type:Boolean,reflectToAttribute:true},hasSecondaryMatches:{type:Boolean,reflectToAttribute:true},isDark:{type:Boolean,reflectToAttribute:true},matchesAreVisible:{type:Boolean,value:false,reflectToAttribute:true},matchSearchbox:{type:Boolean,value:()=>loadTimeData.getBoolean("realboxMatchSearchboxTheme"),reflectToAttribute:true},realboxLensSearchEnabled:{type:Boolean,value:()=>loadTimeData.getBoolean("realboxLensSearch"),reflectToAttribute:true},singleColoredIcons:{type:Boolean,value:false,reflectToAttribute:true},charTypedTime_:{type:Number,value:0},isDeletingInput_:{type:Boolean,value:false},lastIgnoredEnterEvent_:{type:Object,value:null},lastInput_:{type:Object,value:{text:"",inline:""}},lastInputFocusTime_:{type:Number,value:null},lastQueriedInput_:{type:String,value:null},pastedInInput_:{type:Boolean,value:false},realboxIcon_:{type:String,value:()=>loadTimeData.getString("realboxDefaultIcon")},realboxLensSearchEnabled_:{type:Boolean,value:()=>loadTimeData.getBoolean("realboxLensSearch"),reflectToAttribute:true},result_:{type:Object},selectedMatch_:{type:Object,computed:`computeSelectedMatch_(result_, selectedMatchIndex_)`},selectedMatchIndex_:{type:Number,value:-1},inputAriaLive_:{type:String,computed:`computeInputAriaLive_(selectedMatch_)`}}}constructor(){performance.mark("realbox-creation-start");super();this.autocompleteResultChangedListenerId_=null;this.pageHandler_=RealboxBrowserProxy.getInstance().handler;this.callbackRouter_=RealboxBrowserProxy.getInstance().callbackRouter}computeInputAriaLive_(){return this.selectedMatch_?"off":"polite"}connectedCallback(){super.connectedCallback();this.autocompleteResultChangedListenerId_=this.callbackRouter_.autocompleteResultChanged.addListener(this.onAutocompleteResultChanged_.bind(this));showSecondaryMatchesMediaQueryList.addEventListener("change",this.onCanShowSecondaryMatchesChanged_.bind(this))}disconnectedCallback(){super.disconnectedCallback();assert(this.autocompleteResultChangedListenerId_);this.callbackRouter_.removeListener(this.autocompleteResultChangedListenerId_);showSecondaryMatchesMediaQueryList.removeEventListener("change",this.onCanShowSecondaryMatchesChanged_.bind(this))}ready(){super.ready();performance.measure("realbox-creation","realbox-creation-start")}onAutocompleteResultChanged_(result){if(this.lastQueriedInput_===null||this.lastQueriedInput_.trimStart()!==decodeString16$1(result.input)){return}this.result_=result;const hasMatches=result?.matches?.length>0;this.matchesAreVisible=hasMatches;this.$.input.focus();const firstMatch=hasMatches?this.result_.matches[0]:null;if(firstMatch&&firstMatch.allowedToBeDefaultMatch){this.$.matches.selectFirst();this.updateInput_({text:this.lastQueriedInput_,inline:decodeString16$1(firstMatch.inlineAutocompletion)||""});if(this.lastIgnoredEnterEvent_){this.navigateToMatch_(0,this.lastIgnoredEnterEvent_);this.lastIgnoredEnterEvent_=null}}else if(hasMatches&&this.selectedMatchIndex_!==-1&&this.selectedMatchIndex_<this.result_.matches.length){this.$.matches.selectIndex(this.selectedMatchIndex_);this.updateInput_({text:decodeString16$1(this.selectedMatch_.fillIntoEdit),inline:"",moveCursorToEnd:true})}else{this.$.matches.unselect();this.updateInput_({inline:""})}}onCanShowSecondaryMatchesChanged_(e){this.canShowSecondaryMatches=e.matches&&loadTimeData.getBoolean("showSecondarySide")}onHeaderFocusin_(){assert(this.lastQueriedInput_==="");this.$.matches.unselect();this.updateInput_({text:"",inline:""})}onInputCutCopy_(e){if(!this.$.input.value||this.$.input.selectionStart!==0||this.$.input.selectionEnd!==this.$.input.value.length||!this.result_||this.result_.matches.length===0){return}if(this.selectedMatch_&&!this.selectedMatch_.isSearchType){e.clipboardData.setData("text/plain",this.selectedMatch_.destinationUrl.url);e.preventDefault();if(e.type==="cut"){this.updateInput_({text:"",inline:""});this.clearAutocompleteMatches_()}}}onInputFocus_(){this.lastInputFocusTime_=window.performance.now()}onInputInput_(e){const inputValue=this.$.input.value;const lastInputValue=this.lastInput_.text+this.lastInput_.inline;if(lastInputValue===inputValue){return}this.updateInput_({text:inputValue,inline:""});const charTyped=!this.isDeletingInput_&&!!inputValue.trim();this.charTypedTime_=charTyped?this.charTypedTime_||window.performance.now():0;const metricsReporter=MetricsReporterImpl.getInstance();if(charTyped){if(!metricsReporter.hasLocalMark("CharTyped")){metricsReporter.mark("CharTyped")}}else{metricsReporter.clearMark("CharTyped")}if(inputValue.trim()){this.queryAutocomplete_(inputValue,e.isComposing)}else{this.clearAutocompleteMatches_()}this.pastedInInput_=false}onInputKeydown_(e){if(!this.lastInput_.inline){return}const inputValue=this.$.input.value;const inputSelection=inputValue.substring(this.$.input.selectionStart,this.$.input.selectionEnd);const lastInputValue=this.lastInput_.text+this.lastInput_.inline;if(inputSelection===this.lastInput_.inline&&inputValue===lastInputValue&&this.lastInput_.inline[0].toLocaleLowerCase()===e.key.toLocaleLowerCase()){const text=this.lastInput_.text+e.key;assert(text);this.updateInput_({text:text,inline:this.lastInput_.inline.substr(1)});this.charTypedTime_=this.charTypedTime_||window.performance.now();const metricsReporter=MetricsReporterImpl.getInstance();if(!metricsReporter.hasLocalMark("CharTyped")){metricsReporter.mark("CharTyped")}this.queryAutocomplete_(this.lastInput_.text);e.preventDefault()}}onInputKeyup_(e){if(e.key!=="Tab"){return}if(!this.$.input.value&&!this.matchesAreVisible){this.queryAutocomplete_("")}}onInputMouseDown_(e){if(e.button!==0){return}if(!this.$.input.value&&!this.matchesAreVisible){this.queryAutocomplete_("")}}onInputPaste_(){this.pastedInInput_=true}onInputWrapperFocusout_(e){if(!this.$.inputWrapper.contains(e.relatedTarget)){if(this.lastQueriedInput_===""){this.updateInput_({text:"",inline:""});this.clearAutocompleteMatches_()}else{this.matchesAreVisible=false;this.pageHandler_.stopAutocomplete(false)}}}onInputWrapperKeydown_(e){const KEYDOWN_HANDLED_KEYS=["ArrowDown","ArrowUp","Delete","Enter","Escape","PageDown","PageUp"];if(!KEYDOWN_HANDLED_KEYS.includes(e.key)){return}if(e.defaultPrevented){return}if(!this.matchesAreVisible){if(e.key==="ArrowUp"||e.key==="ArrowDown"){const inputValue=this.$.input.value;if(inputValue.trim()||!inputValue){this.queryAutocomplete_(inputValue)}e.preventDefault();return}}if(!this.result_||this.result_.matches.length===0){return}if(e.key==="Delete"){if(e.shiftKey&&!e.altKey&&!e.ctrlKey&&!e.metaKey){if(this.selectedMatch_&&this.selectedMatch_.supportsDeletion){this.pageHandler_.deleteAutocompleteMatch(this.selectedMatchIndex_);e.preventDefault()}}return}if(e.isComposing){return}if(e.key==="Enter"){const array=[this.$.matches,this.$.input];if(array.includes(e.target)){if(this.lastQueriedInput_!==null&&this.lastQueriedInput_.trimStart()===decodeString16$1(this.result_.input)){if(this.selectedMatch_){this.navigateToMatch_(this.selectedMatchIndex_,e)}}else{this.lastIgnoredEnterEvent_=e;e.preventDefault()}}return}if(hasKeyModifiers(e)){return}if(e.key==="Escape"&&this.selectedMatchIndex_<=0){this.updateInput_({text:"",inline:""});this.clearAutocompleteMatches_();e.preventDefault();return}if(e.key==="ArrowDown"){this.$.matches.selectNext();this.pageHandler_.onNavigationLikely(this.selectedMatchIndex_,NavigationPredictor.kUpOrDownArrowButton)}else if(e.key==="ArrowUp"){this.$.matches.selectPrevious();this.pageHandler_.onNavigationLikely(this.selectedMatchIndex_,NavigationPredictor.kUpOrDownArrowButton)}else if(e.key==="Escape"||e.key==="PageUp"){this.$.matches.selectFirst()}else if(e.key==="PageDown"){this.$.matches.selectLast()}e.preventDefault();if(this.shadowRoot.activeElement===this.$.matches){this.$.matches.focusSelected()}const newFill=decodeString16$1(this.selectedMatch_.fillIntoEdit);const newInline=this.selectedMatchIndex_===0&&this.selectedMatch_.allowedToBeDefaultMatch?decodeString16$1(this.selectedMatch_.inlineAutocompletion):"";const newFillEnd=newFill.length-newInline.length;const text=newFill.substr(0,newFillEnd);assert(text);this.updateInput_({text:text,inline:newInline,moveCursorToEnd:newInline.length===0})}onMatchClick_(e){this.navigateToMatch_(e.detail.index,e.detail.event)}onMatchFocusin_(e){this.$.matches.selectIndex(e.detail);this.updateInput_({text:decodeString16$1(this.selectedMatch_.fillIntoEdit),inline:"",moveCursorToEnd:true})}onMatchRemove_(e){this.pageHandler_.deleteAutocompleteMatch(e.detail)}onResultRepaint_(e){if(this.charTypedTime_){this.pageHandler_.logCharTypedToRepaintLatency(mojoTimeDelta(e.detail-this.charTypedTime_));this.charTypedTime_=0}}onVoiceSearchClick_(){this.dispatchEvent(new Event("open-voice-search"))}onLensSearchClick_(){this.matchesAreVisible=false;this.dispatchEvent(new Event("open-lens-search"))}computeSelectedMatch_(){if(!this.result_||!this.result_.matches){return null}return this.result_.matches[this.selectedMatchIndex_]||null}clearAutocompleteMatches_(){this.matchesAreVisible=false;this.result_=null;this.$.matches.unselect();this.pageHandler_.stopAutocomplete(true);this.lastQueriedInput_=null}navigateToMatch_(matchIndex,e){assert(matchIndex>=0);const match=this.result_.matches[matchIndex];assert(match);assert(this.lastInputFocusTime_);const delta=mojoTimeDelta(window.performance.now()-this.lastInputFocusTime_);this.pageHandler_.openAutocompleteMatch(matchIndex,match.destinationUrl,this.matchesAreVisible,delta,e.button||0,e.altKey,e.ctrlKey,e.metaKey,e.shiftKey);e.preventDefault()}queryAutocomplete_(input,preventInlineAutocomplete=false){this.lastQueriedInput_=input;const caretNotAtEnd=this.$.input.selectionStart!==input.length;preventInlineAutocomplete=preventInlineAutocomplete||this.isDeletingInput_||this.pastedInInput_||caretNotAtEnd;this.pageHandler_.queryAutocomplete(mojoString16(input),preventInlineAutocomplete)}updateInput_(update){const newInput=Object.assign({},this.lastInput_,update);const newInputValue=newInput.text+newInput.inline;const lastInputValue=this.lastInput_.text+this.lastInput_.inline;const inlineDiffers=newInput.inline!==this.lastInput_.inline;const preserveSelection=!inlineDiffers&&!update.moveCursorToEnd;let needsSelectionUpdate=!preserveSelection;const oldSelectionStart=this.$.input.selectionStart;const oldSelectionEnd=this.$.input.selectionEnd;if(newInputValue!==this.$.input.value){this.$.input.value=newInputValue;needsSelectionUpdate=true}if(newInputValue.trim()&&needsSelectionUpdate){this.$.input.selectionStart=preserveSelection?oldSelectionStart:update.moveCursorToEnd?newInputValue.length:newInput.text.length;this.$.input.selectionEnd=preserveSelection?oldSelectionEnd:newInputValue.length}this.isDeletingInput_=lastInputValue.length>newInputValue.length&&lastInputValue.startsWith(newInputValue);this.lastInput_=newInput}}customElements.define(RealboxElement.is,RealboxElement);function getTemplate$3(){return html`<!--_html_template_start_--><style>#dialog::part(dialog){max-width:300px}#buttons{display:flex;flex-direction:row;justify-content:center;margin-bottom:28px;margin-top:20px}#buttons cr-button{background-position:center;background-repeat:no-repeat;background-size:cover;border:none;height:48px;min-width:48px;width:48px}#buttons cr-button:hover{opacity:.8}#buttons>:not(:last-child){margin-inline-end:12px}#facebookButton{background-image:url(icons/facebook.svg)}#twitterButton{background-image:url(icons/twitter.svg)}#emailButton{background-image:url(icons/mail.svg)}#url{--cr-input-error-display:none}#copyButton{--cr-icon-image:url(icons/copy.svg);margin-inline-start:2px}</style>
  469. <cr-dialog id="dialog" show-on-attach>
  470.   <div id="title" slot="title">
  471.     [[title]]
  472.   </div>
  473.   <div slot="body">
  474.     <div id="buttons">
  475.       <cr-button id="facebookButton" title="Facebook" on-click="onFacebookClick_">
  476.       </cr-button>
  477.       <cr-button id="twitterButton" title="Twitter" on-click="onTwitterClick_">
  478.       </cr-button>
  479.       <cr-button id="emailButton" title="E-mail" on-click="onEmailClick_">
  480.       </cr-button>
  481.     </div>
  482.     <cr-input readonly="readonly" label="Doodle Link" id="url" value="[[url.url]]">
  483.       <cr-icon-button id="copyButton" slot="suffix" title="Copy Link" on-click="onCopyClick_">
  484.       </cr-icon-button>
  485.     </cr-input>
  486.   </div>
  487.   <div slot="button-container">
  488.     <cr-button id="doneButton" class="action-button" on-click="onCloseClick_">
  489.       Done
  490.     </cr-button>
  491.   </div>
  492. </cr-dialog>
  493. <!--_html_template_end_-->`}
  494. // Copyright 2020 The Chromium Authors
  495. const FACEBOOK_APP_ID=738026486351791;class DoodleShareDialogElement extends PolymerElement{static get is(){return"ntp-doodle-share-dialog"}static get template(){return getTemplate$3()}static get properties(){return{title:String,url:Object}}onFacebookClick_(){const url="https://www.facebook.com/dialog/share"+`?app_id=${FACEBOOK_APP_ID}`+`&href=${encodeURIComponent(this.url.url)}`+`&hashtag=${encodeURIComponent("#GoogleDoodle")}`;WindowProxy.getInstance().open(url);this.notifyShare_(DoodleShareChannel.kFacebook)}onTwitterClick_(){const url="https://twitter.com/intent/tweet"+`?text=${encodeURIComponent(`${this.title}\n${this.url.url}`)}`;WindowProxy.getInstance().open(url);this.notifyShare_(DoodleShareChannel.kTwitter)}onEmailClick_(){const url=`mailto:?subject=${encodeURIComponent(this.title)}`+`&body=${encodeURIComponent(this.url.url)}`;WindowProxy.getInstance().navigate(url);this.notifyShare_(DoodleShareChannel.kEmail)}onCopyClick_(){this.$.url.select();navigator.clipboard.writeText(this.url.url);this.notifyShare_(DoodleShareChannel.kLinkCopy)}onCloseClick_(){this.$.dialog.close()}notifyShare_(channel){this.dispatchEvent(new CustomEvent("share",{detail:channel}))}}customElements.define(DoodleShareDialogElement.is,DoodleShareDialogElement);function getTemplate$2(){return html`<!--_html_template_start_--><style include="cr-hidden-style">:host{--ntp-logo-height:200px;display:flex;flex-direction:column;flex-shrink:0;justify-content:flex-end;min-height:var(--ntp-logo-height)}:host([reduced-logo-space-enabled_]){--ntp-logo-height:168px}:host([doodle-boxed_]){justify-content:flex-end}#logo{forced-color-adjust:none;height:92px;width:272px}:host([single-colored]) #logo{-webkit-mask-image:url(icons/google_logo.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-size:100%;background-color:var(--ntp-logo-color)}:host(:not([single-colored])) #logo{background-image:url(icons/google_logo.svg)}#imageDoodle{cursor:pointer;outline:0}#imageDoodle[tabindex='-1']{cursor:auto}:host([doodle-boxed_]) #imageDoodle{background-color:var(--ntp-logo-box-color);border-radius:20px;padding:16px 24px}:host-context(.focus-outline-visible) #imageDoodle:focus{box-shadow:0 0 0 2px rgba(var(--google-blue-600-rgb),.4)}#imageContainer{display:flex;height:fit-content;position:relative;width:fit-content}#image{max-height:var(--ntp-logo-height);max-width:100%}:host([doodle-boxed_]) #image{max-height:160px}:host([doodle-boxed_][reduced-logo-space-enabled_]) #image{max-height:128px}#animation{height:100%;pointer-events:none;position:absolute;width:100%}#shareButton{background-color:var(--ntp-logo-share-button-background-color,none);border:none;height:var(--ntp-logo-share-button-height,0);left:var(--ntp-logo-share-button-x,0);min-width:var(--ntp-logo-share-button-width,0);opacity:.8;outline:initial;padding:2px;position:absolute;top:var(--ntp-logo-share-button-y,0);width:var(--ntp-logo-share-button-width,0)}#shareButton:hover{opacity:1}#shareButton img{height:100%;width:100%}#iframe{border:none;height:var(--height,var(--ntp-logo-height));transition-duration:var(--duration,100ms);transition-property:height,width;width:var(--width,100%)}#iframe:not([expanded]){max-height:var(--ntp-logo-height)}</style>
  496.  
  497. <template is="dom-if" if="[[showLogo_]]" restamp>
  498.   <div id="logo"></div>
  499. </template>
  500. <template is="dom-if" if="[[showDoodle_]]" restamp>
  501.   <div id="doodle" title="[[doodle_.description]]">
  502.     <div id="imageDoodle" hidden="[[!imageDoodle_]]" tabindex$="[[imageDoodleTabIndex_]]" on-click="onImageClick_" on-keydown="onImageKeydown_">
  503.       <div id="imageContainer">
  504.        
  505.         <img id="image" src="[[imageUrl_]]" on-load="onImageLoad_">
  506.         <ntp-iframe id="animation" src="[[animationUrl_]]" hidden="[[!showAnimation_]]">
  507.         </ntp-iframe>
  508.         <cr-button id="shareButton" title="Share Doodle" on-click="onShareButtonClick_" hidden="[[!imageDoodle_.shareButton]]">
  509.           <img id="shareButtonImage" src="[[imageDoodle_.shareButton.iconUrl.url]]">
  510.          
  511.         </cr-button>
  512.       </div>
  513.     </div>
  514.     <template is="dom-if" if="[[iframeUrl_]]" restamp>
  515.       <ntp-iframe id="iframe" src="[[iframeUrl_]]" expanded$="[[expanded_]]" allow="autoplay; clipboard-write">
  516.       </ntp-iframe>
  517.     </template>
  518.   </div>
  519. </template>
  520. <template is="dom-if" if="[[showShareDialog_]]" restamp>
  521.   <ntp-doodle-share-dialog title="[[doodle_.description]]" url="[[doodle_.image.shareUrl]]" on-close="onShareDialogClose_" on-share="onShare_">
  522.   </ntp-doodle-share-dialog>
  523. </template>
  524. <!--_html_template_end_-->`}
  525. // Copyright 2020 The Chromium Authors
  526. const SHARE_BUTTON_SIZE_PX=26;class LogoElement extends PolymerElement{static get is(){return"ntp-logo"}static get template(){return getTemplate$2()}static get properties(){return{singleColored:{reflectToAttribute:true,type:Boolean,value:false},dark:{observer:"onDarkChange_",type:Boolean},backgroundColor:Object,loaded_:Boolean,doodle_:Object,imageDoodle_:{observer:"onImageDoodleChange_",computed:"computeImageDoodle_(dark, doodle_)",type:Object},showLogo_:{computed:"computeShowLogo_(loaded_, showDoodle_)",type:Boolean},showDoodle_:{computed:"computeShowDoodle_(doodle_, imageDoodle_)",type:Boolean},doodleBoxed_:{reflectToAttribute:true,type:Boolean,computed:"computeDoodleBoxed_(backgroundColor, imageDoodle_)"},imageUrl_:{computed:"computeImageUrl_(imageDoodle_)",type:String},showAnimation_:{type:Boolean,value:false},animationUrl_:{computed:"computeAnimationUrl_(imageDoodle_)",type:String},iframeUrl_:{computed:"computeIframeUrl_(doodle_)",type:String},duration_:{observer:"onDurationHeightWidthChange_",type:String},height_:{observer:"onDurationHeightWidthChange_",type:String},width_:{observer:"onDurationHeightWidthChange_",type:String},expanded_:Boolean,showShareDialog_:Boolean,imageDoodleTabIndex_:{type:Number,computed:"computeImageDoodleTabIndex_(doodle_, showAnimation_)"},reducedLogoSpaceEnabled_:{type:Boolean,reflectToAttribute:true,value:()=>loadTimeData.getBoolean("reducedLogoSpaceEnabled")}}}constructor(){performance.mark("logo-creation-start");super();this.eventTracker_=new EventTracker;this.imageClickParams_=null;this.interactionLogUrl_=null;this.shareId_=null;this.pageHandler_=NewTabPageProxy.getInstance().handler;this.pageHandler_.getDoodle().then((({doodle:doodle})=>{this.doodle_=doodle;this.loaded_=true;if(this.doodle_&&this.doodle_.interactive){this.width_=`${this.doodle_.interactive.width}px`;this.height_=`${this.doodle_.interactive.height}px`}}))}connectedCallback(){super.connectedCallback();this.eventTracker_.add(window,"message",(({data:data})=>{if(data["cmd"]==="resizeDoodle"){assert(data.duration);this.duration_=data.duration;assert(data.height);this.height_=data.height;assert(data.width);this.width_=data.width;this.expanded_=true}else if(data["cmd"]==="sendMode"){this.sendMode_()}}));this.sendMode_()}disconnectedCallback(){super.disconnectedCallback();this.eventTracker_.removeAll()}ready(){super.ready();performance.measure("logo-creation","logo-creation-start")}onImageDoodleChange_(){const shareButton=this.imageDoodle_&&this.imageDoodle_.shareButton;if(shareButton){const height=this.imageDoodle_.height;const width=this.imageDoodle_.width;this.updateStyles({"--ntp-logo-share-button-background-color":skColorToRgba(shareButton.backgroundColor),"--ntp-logo-share-button-height":`${SHARE_BUTTON_SIZE_PX/height*100}%`,"--ntp-logo-share-button-width":`${SHARE_BUTTON_SIZE_PX/width*100}%`,"--ntp-logo-share-button-x":`${shareButton.x/width*100}%`,"--ntp-logo-share-button-y":`${shareButton.y/height*100}%`})}else{this.updateStyles({"--ntp-logo-share-button-background-color":null,"--ntp-logo-share-button-height":null,"--ntp-logo-share-button-width":null,"--ntp-logo-share-button-x":null,"--ntp-logo-share-button-y":null})}if(this.imageDoodle_){this.updateStyles({"--ntp-logo-box-color":skColorToRgba(this.imageDoodle_.backgroundColor)})}else{this.updateStyles({"--ntp-logo-box-color":null})}this.showAnimation_=false;this.imageClickParams_=null;this.interactionLogUrl_=null;this.shareId_=null}computeImageDoodle_(){return this.doodle_&&this.doodle_.image&&(this.dark?this.doodle_.image.dark:this.doodle_.image.light)||null}computeShowLogo_(){return!!this.loaded_&&!this.showDoodle_}computeShowDoodle_(){return!!this.imageDoodle_||!!this.doodle_&&!!this.doodle_.interactive&&window.navigator.onLine}computeDoodleBoxed_(){return!this.backgroundColor||!!this.imageDoodle_&&this.imageDoodle_.backgroundColor.value!==this.backgroundColor.value}onImageClick_(){if($$(this,"#imageDoodle").tabIndex<0){return}if(this.isCtaImageShown_()){this.showAnimation_=true;this.pageHandler_.onDoodleImageClicked(DoodleImageType.kCta,this.interactionLogUrl_);this.logImageRendered_(DoodleImageType.kAnimation,this.imageDoodle_.animationImpressionLogUrl);if(!this.doodle_.image.onClickUrl){$$(this,"#imageDoodle").blur()}return}assert(this.doodle_.image.onClickUrl);this.pageHandler_.onDoodleImageClicked(this.showAnimation_?DoodleImageType.kAnimation:DoodleImageType.kStatic,null);const onClickUrl=new URL(this.doodle_.image.onClickUrl.url);if(this.imageClickParams_){for(const param of new URLSearchParams(this.imageClickParams_)){onClickUrl.searchParams.append(param[0],param[1])}}WindowProxy.getInstance().open(onClickUrl.toString())}onImageLoad_(){this.logImageRendered_(this.isCtaImageShown_()?DoodleImageType.kCta:DoodleImageType.kStatic,this.imageDoodle_.imageImpressionLogUrl)}async logImageRendered_(type,logUrl){const{imageClickParams:imageClickParams,interactionLogUrl:interactionLogUrl,shareId:shareId}=await this.pageHandler_.onDoodleImageRendered(type,WindowProxy.getInstance().now(),logUrl);this.imageClickParams_=imageClickParams;this.interactionLogUrl_=interactionLogUrl;this.shareId_=shareId}onImageKeydown_(e){if([" ","Enter"].includes(e.key)){this.onImageClick_()}}onShare_(e){const doodleId=new URL(this.doodle_.image.onClickUrl.url).searchParams.get("ct");if(!doodleId){return}this.pageHandler_.onDoodleShared(e.detail,doodleId,this.shareId_)}isCtaImageShown_(){return!this.showAnimation_&&!!this.imageDoodle_&&!!this.imageDoodle_.animationUrl}sendMode_(){const iframe=$$(this,"#iframe");if(this.dark===undefined||!iframe){return}iframe.postMessage({cmd:"changeMode",dark:this.dark})}onDarkChange_(){this.sendMode_()}computeImageUrl_(){return this.imageDoodle_?this.imageDoodle_.imageUrl.url:""}computeAnimationUrl_(){return this.imageDoodle_&&this.imageDoodle_.animationUrl?`chrome-untrusted://new-tab-page/image?${this.imageDoodle_.animationUrl.url}`:""}computeIframeUrl_(){if(this.doodle_&&this.doodle_.interactive){const url=new URL(this.doodle_.interactive.url.url);url.searchParams.append("theme_messages","0");return url.href}else{return""}}onShareButtonClick_(e){e.stopPropagation();this.showShareDialog_=true}onShareDialogClose_(){this.showShareDialog_=false}onDurationHeightWidthChange_(){this.updateStyles({"--duration":this.duration_,"--height":this.height_,"--width":this.width_})}computeImageDoodleTabIndex_(){return this.doodle_&&this.doodle_.image&&(this.isCtaImageShown_()||this.doodle_.image.onClickUrl)?0:-1}}customElements.define(LogoElement.is,LogoElement);
  527. // Copyright 2021 The Chromium Authors
  528. let instance$2=null;class BrowserProxy{constructor(){this.callbackRouter=new PageCallbackRouter$1;const pageHandlerRemote=PageHandler$1.getRemote();pageHandlerRemote.setPage(this.callbackRouter.$.bindNewPipeAndPassRemote())}static getInstance(){return instance$2||(instance$2=new BrowserProxy)}static setInstance(newInstance){instance$2=newInstance}}
  529. // Copyright 2021 The Chromium Authors
  530. const COLORS_CSS_SELECTOR="link[href*='colors.css']";function refreshColorCss(){const colorCssNode=document.querySelector(COLORS_CSS_SELECTOR);if(!colorCssNode){return false}const href=colorCssNode.getAttribute("href");if(!href){return false}const hrefURL=new URL(href);const params=new URLSearchParams(hrefURL.search);params.set("version",(new Date).getTime().toString());const newHref=`${hrefURL.origin}${hrefURL.pathname}?${params.toString()}`;const newColorsCssLink=document.createElement("link");newColorsCssLink.setAttribute("href",newHref);newColorsCssLink.rel="stylesheet";newColorsCssLink.type="text/css";newColorsCssLink.onload=()=>{const oldColorCssNode=document.querySelector(COLORS_CSS_SELECTOR);if(oldColorCssNode){oldColorCssNode.remove()}};document.getElementsByTagName("body")[0].appendChild(newColorsCssLink);return true}let listenerId=null;let clientColorChangeListeners=[];function colorProviderChangeHandler(){refreshColorCss();for(const listener of clientColorChangeListeners){listener()}}function startColorChangeUpdater(){if(listenerId===null){listenerId=BrowserProxy.getInstance().callbackRouter.onColorProviderChanged.addListener(colorProviderChangeHandler)}}const PointSpec={$:{}};const PointFSpec={$:{}};const Point3FSpec={$:{}};const SizeSpec={$:{}};const SizeFSpec={$:{}};const RectSpec={$:{}};const RectFSpec={$:{}};const InsetsSpec={$:{}};const InsetsFSpec={$:{}};const Vector2dSpec={$:{}};const Vector2dFSpec={$:{}};const Vector3dFSpec={$:{}};const QuaternionSpec={$:{}};mojo.internal.Struct(PointSpec.$,"Point",[mojo.internal.StructField("x",0,0,mojo.internal.Int32,0,false,0),mojo.internal.StructField("y",4,0,mojo.internal.Int32,0,false,0)],[[0,16]]);mojo.internal.Struct(PointFSpec.$,"PointF",[mojo.internal.StructField("x",0,0,mojo.internal.Float,0,false,0),mojo.internal.StructField("y",4,0,mojo.internal.Float,0,false,0)],[[0,16]]);mojo.internal.Struct(Point3FSpec.$,"Point3F",[mojo.internal.StructField("x",0,0,mojo.internal.Float,0,false,0),mojo.internal.StructField("y",4,0,mojo.internal.Float,0,false,0),mojo.internal.StructField("z",8,0,mojo.internal.Float,0,false,0)],[[0,24]]);mojo.internal.Struct(SizeSpec.$,"Size",[mojo.internal.StructField("width",0,0,mojo.internal.Int32,0,false,0),mojo.internal.StructField("height",4,0,mojo.internal.Int32,0,false,0)],[[0,16]]);mojo.internal.Struct(SizeFSpec.$,"SizeF",[mojo.internal.StructField("width",0,0,mojo.internal.Float,0,false,0),mojo.internal.StructField("height",4,0,mojo.internal.Float,0,false,0)],[[0,16]]);mojo.internal.Struct(RectSpec.$,"Rect",[mojo.internal.StructField("x",0,0,mojo.internal.Int32,0,false,0),mojo.internal.StructField("y",4,0,mojo.internal.Int32,0,false,0),mojo.internal.StructField("width",8,0,mojo.internal.Int32,0,false,0),mojo.internal.StructField("height",12,0,mojo.internal.Int32,0,false,0)],[[0,24]]);mojo.internal.Struct(RectFSpec.$,"RectF",[mojo.internal.StructField("x",0,0,mojo.internal.Float,0,false,0),mojo.internal.StructField("y",4,0,mojo.internal.Float,0,false,0),mojo.internal.StructField("width",8,0,mojo.internal.Float,0,false,0),mojo.internal.StructField("height",12,0,mojo.internal.Float,0,false,0)],[[0,24]]);class RectF{constructor(){this.x;this.y;this.width;this.height}}mojo.internal.Struct(InsetsSpec.$,"Insets",[mojo.internal.StructField("top",0,0,mojo.internal.Int32,0,false,0),mojo.internal.StructField("left",4,0,mojo.internal.Int32,0,false,0),mojo.internal.StructField("bottom",8,0,mojo.internal.Int32,0,false,0),mojo.internal.StructField("right",12,0,mojo.internal.Int32,0,false,0)],[[0,24]]);mojo.internal.Struct(InsetsFSpec.$,"InsetsF",[mojo.internal.StructField("top",0,0,mojo.internal.Float,0,false,0),mojo.internal.StructField("left",4,0,mojo.internal.Float,0,false,0),mojo.internal.StructField("bottom",8,0,mojo.internal.Float,0,false,0),mojo.internal.StructField("right",12,0,mojo.internal.Float,0,false,0)],[[0,24]]);class InsetsF{constructor(){this.top;this.left;this.bottom;this.right}}mojo.internal.Struct(Vector2dSpec.$,"Vector2d",[mojo.internal.StructField("x",0,0,mojo.internal.Int32,0,false,0),mojo.internal.StructField("y",4,0,mojo.internal.Int32,0,false,0)],[[0,16]]);mojo.internal.Struct(Vector2dFSpec.$,"Vector2dF",[mojo.internal.StructField("x",0,0,mojo.internal.Float,0,false,0),mojo.internal.StructField("y",4,0,mojo.internal.Float,0,false,0)],[[0,16]]);mojo.internal.Struct(Vector3dFSpec.$,"Vector3dF",[mojo.internal.StructField("x",0,0,mojo.internal.Float,0,false,0),mojo.internal.StructField("y",4,0,mojo.internal.Float,0,false,0),mojo.internal.StructField("z",8,0,mojo.internal.Float,0,false,0)],[[0,24]]);mojo.internal.Struct(QuaternionSpec.$,"Quaternion",[mojo.internal.StructField("x",0,0,mojo.internal.Double,0,false,0),mojo.internal.StructField("y",8,0,mojo.internal.Double,0,false,0),mojo.internal.StructField("z",16,0,mojo.internal.Double,0,false,0),mojo.internal.StructField("w",24,0,mojo.internal.Double,0,false,0)],[[0,40]]);const template=html`<iron-iconset-svg name="iph" size="24">
  531.   <svg>
  532.     <defs>
  533.       <!--
  534.       These icons are copied from Material UI and optimized through SVGOMG
  535.       See http://goo.gl/Y1OdAq for instructions on adding additional icons.
  536.       -->
  537.       <g id="celebration">
  538.         <path fill="none" d="M0 0h20v20H0z"></path>
  539.         <path fill-rule="evenodd"
  540.           d="m2 22 14-5-9-9-5 14Zm10.35-5.82L5.3 18.7l2.52-7.05 4.53 4.53ZM14.53 12.53l5.59-5.59a1.25 1.25 0 0 1 1.77 0l.59.59 1.06-1.06-.59-.59a2.758 2.758 0 0 0-3.89 0l-5.59 5.59 1.06 1.06ZM10.06 6.88l-.59.59 1.06 1.06.59-.59a2.758 2.758 0 0 0 0-3.89l-.59-.59-1.06 1.07.59.59c.48.48.48 1.28 0 1.76ZM17.06 11.88l-1.59 1.59 1.06 1.06 1.59-1.59a1.25 1.25 0 0 1 1.77 0l1.61 1.61 1.06-1.06-1.61-1.61a2.758 2.758 0 0 0-3.89 0ZM15.06 5.88l-3.59 3.59 1.06 1.06 3.59-3.59a2.758 2.758 0 0 0 0-3.89l-1.59-1.59-1.06 1.06 1.59 1.59c.48.49.48 1.29 0 1.77Z">
  541.         </path>
  542.       </g>
  543.       <g id="lightbulb_outline">
  544.         <path fill="none" d="M0 0h24v24H0z"></path>
  545.         <path
  546.           d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2 11.7V16h-4v-2.3C8.48 12.63 7 11.53 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.49-1.51 3.65-3 4.7z">
  547.         </path>
  548.       </g>
  549.     </defs>
  550.   </svg>
  551. </iron-iconset-svg>
  552. `;document.head.appendChild(template.content);function getTemplate$1(){return html`<!--_html_template_start_--><style include="cr-hidden-style">
  553.   :host {
  554.     border-radius: 8px;
  555.     box-shadow: 0 6px 10px 4px rgba(60, 64, 67, 0.15), 0 2px 3px rgba(60, 64, 67, 0.3);
  556.     box-sizing: border-box;
  557.     position: absolute;
  558.     z-index: 1;
  559.   }
  560.  
  561.   #arrow {
  562.     --help-bubble-arrow-size: 11.3px;
  563.     --help-bubble-arrow-size-half: calc(var(--help-bubble-arrow-size) / 2);
  564.     --help-bubble-arrow-diameter: 16px;
  565.     /* approx. */
  566.     --help-bubble-arrow-radius: calc(var(--help-bubble-arrow-diameter) / 2);
  567.     --help-bubble-arrow-edge-offset: 22px;
  568.     --help-bubble-arrow-offset: calc(var(--help-bubble-arrow-edge-offset) + var(--help-bubble-arrow-radius));
  569.     --help-bubble-arrow-border-radius: 2px;
  570.     position: absolute;
  571.   }
  572.  
  573.   /* #inner-arrow is rotated and positioned in a container to simplify positioning */
  574.   #inner-arrow {
  575.     background-color: var(--help-bubble-background);
  576.     height: var(--help-bubble-arrow-size);
  577.     left: calc(0px - var(--help-bubble-arrow-size-half));
  578.     position: absolute;
  579.     top: calc(0px - var(--help-bubble-arrow-size-half));
  580.     transform: rotate(45deg);
  581.     width: var(--help-bubble-arrow-size);
  582.     z-index: -1;
  583.   }
  584.  
  585.   #arrow.bottom-edge {
  586.     bottom: 0;
  587.   }
  588.  
  589.   #arrow.bottom-edge #inner-arrow {
  590.     border-bottom-right-radius: var(--help-bubble-arrow-border-radius);
  591.   }
  592.  
  593.   #arrow.top-edge {
  594.     top: 0;
  595.   }
  596.  
  597.   #arrow.top-edge #inner-arrow {
  598.     border-top-left-radius: var(--help-bubble-arrow-border-radius);
  599.   }
  600.  
  601.   #arrow.right-edge {
  602.     right: 0;
  603.   }
  604.  
  605.   #arrow.right-edge #inner-arrow {
  606.     border-top-right-radius: var(--help-bubble-arrow-border-radius);
  607.   }
  608.  
  609.   #arrow.left-edge {
  610.     left: 0;
  611.   }
  612.  
  613.   #arrow.left-edge #inner-arrow {
  614.     border-bottom-left-radius: var(--help-bubble-arrow-border-radius);
  615.   }
  616.  
  617.   #arrow.top-position {
  618.     top: var(--help-bubble-arrow-offset);
  619.   }
  620.  
  621.   #arrow.vertical-center-position {
  622.     top: 50%;
  623.   }
  624.  
  625.   #arrow.bottom-position {
  626.     bottom: var(--help-bubble-arrow-offset);
  627.   }
  628.  
  629.   #arrow.left-position {
  630.     left: var(--help-bubble-arrow-offset);
  631.   }
  632.  
  633.   #arrow.horizontal-center-position {
  634.     left: 50%;
  635.   }
  636.  
  637.   #arrow.right-position {
  638.     right: var(--help-bubble-arrow-offset);
  639.   }
  640.  
  641.   #topContainer {
  642.     display: flex;
  643.     flex-direction: row;
  644.   }
  645.  
  646.   #progress {
  647.     display: inline-block;
  648.     flex: auto;
  649.   }
  650.  
  651.   #progress div {
  652.     --help-bubble-progress-size: 8px;
  653.     background-color: var(--help-bubble-text-color);
  654.     border: 1px solid var(--help-bubble-text-color);
  655.     border-radius: 50%;
  656.     display: inline-block;
  657.     height: var(--help-bubble-progress-size);
  658.     margin-inline-end: var(--help-bubble-element-spacing);
  659.     margin-top: 5px;
  660.     width: var(--help-bubble-progress-size);
  661.   }
  662.  
  663.   #progress .total-progress {
  664.     background-color: var(--help-bubble-background);
  665.   }
  666.  
  667.   #topBody,
  668.   #mainBody {
  669.     flex: 1;
  670.     font-size: 14px;
  671.     font-style: normal;
  672.     font-weight: 500;
  673.     letter-spacing: 0.3px;
  674.     line-height: 20px;
  675.     margin: 0;
  676.   }
  677.  
  678.   #title {
  679.     flex: 1;
  680.     font-size: 18px;
  681.     font-style: normal;
  682.     font-weight: 500;
  683.     line-height: 22px;
  684.     margin: 0;
  685.   }
  686.  
  687.   /* Note: help bubbles have the same color treatment in both light and dark
  688.    * themes, which is why the values below do not change based on theme
  689.    * preference. */
  690.   .help-bubble {
  691.     --help-bubble-background: var(--google-blue-700);
  692.     --help-bubble-element-spacing: 8px;
  693.     --help-bubble-text-color: var(--google-grey-200);
  694.     background-color: var(--help-bubble-background);
  695.     border-radius: 8px;
  696.     box-sizing: border-box;
  697.     color: var(--help-bubble-text-color);
  698.     display: flex;
  699.     flex-direction: column;
  700.     justify-content: space-between;
  701.     padding: 16px 20px;
  702.     position: relative;
  703.     width: 340px;
  704.   }
  705.  
  706.   #main {
  707.     display: flex;
  708.     flex-direction: row;
  709.     justify-content: flex-start;
  710.     margin-top: var(--help-bubble-element-spacing);
  711.   }
  712.  
  713.   #middleRowSpacer {
  714.     margin-inline-start: 32px;
  715.   }
  716.  
  717.   cr-icon-button {
  718.     --cr-icon-button-fill-color: var(--help-bubble-text-color);
  719.     --cr-icon-button-hover-background-color:
  720.       rgba(var(--google-blue-300-rgb), .3);
  721.     --cr-icon-button-icon-size: 16px;
  722.     --cr-icon-button-size: 24px;
  723.     --cr-icon-button-stroke-color: var(--help-bubble-text-color);
  724.     box-sizing: border-box;
  725.     display: block;
  726.     flex: none;
  727.     float: right;
  728.     height: var(--cr-icon-button-size);
  729.     margin: 0;
  730.     margin-inline-start: var(--help-bubble-element-spacing);
  731.     order: 2;
  732.     width: var(--cr-icon-button-size);
  733.   }
  734.  
  735.   cr-icon-button:focus {
  736.     border: 2px solid var(--help-bubble-text-color);
  737.   }
  738.  
  739.   #bodyIcon {
  740.     --body-icon-button-size: 24px;
  741.     --iron-icon-height: 18px;
  742.     --iron-icon-width: 18px;
  743.     background-color: var(--help-bubble-text-color);
  744.     border-radius: 50%;
  745.     box-sizing: border-box;
  746.     color: var(--help-bubble-background);
  747.     height: var(--body-icon-button-size);
  748.     margin-inline-end: var(--help-bubble-element-spacing);
  749.     padding: 3px;
  750.     text-align: center;
  751.     width: var(--body-icon-button-size);
  752.   }
  753.  
  754.   #buttons {
  755.     display: flex;
  756.     flex-direction: row;
  757.     justify-content: flex-end;
  758.     margin-top: 24px;
  759.   }
  760.  
  761.   cr-button {
  762.     --text-color: var(--help-bubble-text-color);
  763.     border-color: var(--help-bubble-text-color);
  764.   }
  765.  
  766.   cr-button:not(:first-child) {
  767.     margin-inline-start: var(--help-bubble-element-spacing);
  768.   }
  769.  
  770.   cr-button:focus {
  771.     border-color: var(--help-bubble-background);
  772.     box-shadow: 0 0 0 2px var(--help-bubble-text-color);
  773.   }
  774.  
  775.   cr-button.default-button {
  776.     --text-color: var(--help-bubble-background);
  777.     background-color: var(--help-bubble-text-color);
  778.   }
  779.  
  780.   cr-button.default-button:focus {
  781.     border: 2px solid var(--help-bubble-background);
  782.     box-shadow: 0 0 0 1px var(--help-bubble-text-color);
  783.   }
  784. </style>
  785.  
  786. <div class="help-bubble" role="alertdialog" aria-modal="true"
  787.     aria-labelledby="title" aria-describedby="body" aria-live="assertive"
  788.     on-keydown="onKeyDown_" on-click="blockPropagation_">
  789.   <div id="topContainer">
  790.     <div id="bodyIcon" hidden$="[[!shouldShowBodyIcon_(bodyIconName)]]"
  791.         aria-label$="[[bodyIconAltText]]">
  792.       <iron-icon icon="iph:[[bodyIconName]]"></iron-icon>
  793.     </div>
  794.     <div id="progress" hidden$="[[!progress]]" role="progressbar"
  795.         aria-valuenow$="[[progress.current]]" aria-valuemin="1"
  796.         aria-valuemax$="[[progress.total]]">
  797.       <template is="dom-repeat" items="[[progressData_]]">
  798.         <div class$="[[getProgressClass_(index)]]"></div>
  799.       </template>
  800.     </div>
  801.     <h1 id="title"
  802.         hidden$="[[!shouldShowTitleInTopContainer_(progress, titleText)]]">
  803.       [[titleText]]
  804.     </h1>
  805.     <p id="topBody"
  806.         hidden$="[[!shouldShowBodyInTopContainer_(progress, titleText)]]">
  807.       [[bodyText]]
  808.     </p>
  809.     <cr-icon-button id="close" iron-icon="cr:close"
  810.         hidden$="[[!shouldShowCloseButton_(buttons, forceCloseButton)]]"
  811.         aria-label$="[[closeButtonAltText]]" on-click="dismiss_"
  812.         tabindex$="[[closeButtonTabIndex]]">
  813.     </cr-icon-button>
  814.   </div>
  815.   <div id="main" hidden$="[[!shouldShowBodyInMain_(progress, titleText)]]">
  816.     <div id="middleRowSpacer" hidden$="[[!shouldShowBodyIcon_(bodyIconName)]]">
  817.     </div>
  818.     <p id="mainBody">[[bodyText]]</p>
  819.   </div>
  820.   <div id="buttons" hidden$="[[!buttons.length]]">
  821.     <template is="dom-repeat" id="buttonlist" items="[[buttons]]"
  822.         sort="buttonSortFunc_">
  823.       <cr-button id$="[[getButtonId_(itemsIndex)]]"
  824.           tabindex$="[[getButtonTabIndex_(itemsIndex, item.isDefault)]]"
  825.           class$="[[getButtonClass_(item.isDefault)]]" on-click="onButtonClick_"
  826.           role="button" aria-label="[[item.text]]">[[item.text]]</cr-button>
  827.     </template>
  828.   </div>
  829.   <div id="arrow" class$="[[getArrowClass_(position)]]">
  830.     <div id="inner-arrow"></div>
  831.   </div>
  832. </div><!--_html_template_end_-->`}const HelpBubbleArrowPositionSpec={$:mojo.internal.Enum()};var HelpBubbleArrowPosition;(function(HelpBubbleArrowPosition){HelpBubbleArrowPosition[HelpBubbleArrowPosition["TOP_LEFT"]=0]="TOP_LEFT";HelpBubbleArrowPosition[HelpBubbleArrowPosition["TOP_CENTER"]=1]="TOP_CENTER";HelpBubbleArrowPosition[HelpBubbleArrowPosition["TOP_RIGHT"]=2]="TOP_RIGHT";HelpBubbleArrowPosition[HelpBubbleArrowPosition["BOTTOM_LEFT"]=3]="BOTTOM_LEFT";HelpBubbleArrowPosition[HelpBubbleArrowPosition["BOTTOM_CENTER"]=4]="BOTTOM_CENTER";HelpBubbleArrowPosition[HelpBubbleArrowPosition["BOTTOM_RIGHT"]=5]="BOTTOM_RIGHT";HelpBubbleArrowPosition[HelpBubbleArrowPosition["LEFT_TOP"]=6]="LEFT_TOP";HelpBubbleArrowPosition[HelpBubbleArrowPosition["LEFT_CENTER"]=7]="LEFT_CENTER";HelpBubbleArrowPosition[HelpBubbleArrowPosition["LEFT_BOTTOM"]=8]="LEFT_BOTTOM";HelpBubbleArrowPosition[HelpBubbleArrowPosition["RIGHT_TOP"]=9]="RIGHT_TOP";HelpBubbleArrowPosition[HelpBubbleArrowPosition["RIGHT_CENTER"]=10]="RIGHT_CENTER";HelpBubbleArrowPosition[HelpBubbleArrowPosition["RIGHT_BOTTOM"]=11]="RIGHT_BOTTOM";HelpBubbleArrowPosition[HelpBubbleArrowPosition["MIN_VALUE"]=0]="MIN_VALUE";HelpBubbleArrowPosition[HelpBubbleArrowPosition["MAX_VALUE"]=11]="MAX_VALUE"})(HelpBubbleArrowPosition||(HelpBubbleArrowPosition={}));const HelpBubbleClosedReasonSpec={$:mojo.internal.Enum()};var HelpBubbleClosedReason;(function(HelpBubbleClosedReason){HelpBubbleClosedReason[HelpBubbleClosedReason["kPageChanged"]=0]="kPageChanged";HelpBubbleClosedReason[HelpBubbleClosedReason["kDismissedByUser"]=1]="kDismissedByUser";HelpBubbleClosedReason[HelpBubbleClosedReason["kTimedOut"]=2]="kTimedOut";HelpBubbleClosedReason[HelpBubbleClosedReason["MIN_VALUE"]=0]="MIN_VALUE";HelpBubbleClosedReason[HelpBubbleClosedReason["MAX_VALUE"]=2]="MAX_VALUE"})(HelpBubbleClosedReason||(HelpBubbleClosedReason={}));class HelpBubbleHandlerFactoryPendingReceiver{constructor(handle){this.handle=mojo.internal.interfaceSupport.getEndpointForReceiver(handle)}bindInBrowser(scope="context"){mojo.internal.interfaceSupport.bind(this.handle,"help_bubble.mojom.HelpBubbleHandlerFactory",scope)}}class HelpBubbleHandlerFactoryRemote{constructor(handle){this.proxy=new mojo.internal.interfaceSupport.InterfaceRemoteBase(HelpBubbleHandlerFactoryPendingReceiver,handle);this.$=new mojo.internal.interfaceSupport.InterfaceRemoteBaseWrapper(this.proxy);this.onConnectionError=this.proxy.getConnectionErrorEventRouter()}createHelpBubbleHandler(client,handler){this.proxy.sendMessage(599628186,HelpBubbleHandlerFactory_CreateHelpBubbleHandler_ParamsSpec.$,null,[client,handler])}}class HelpBubbleHandlerFactory{static get $interfaceName(){return"help_bubble.mojom.HelpBubbleHandlerFactory"}static getRemote(){let remote=new HelpBubbleHandlerFactoryRemote;remote.$.bindNewPipeAndPassReceiver().bindInBrowser();return remote}}class HelpBubbleHandlerPendingReceiver{constructor(handle){this.handle=mojo.internal.interfaceSupport.getEndpointForReceiver(handle)}bindInBrowser(scope="context"){mojo.internal.interfaceSupport.bind(this.handle,"help_bubble.mojom.HelpBubbleHandler",scope)}}class HelpBubbleHandlerRemote{constructor(handle){this.proxy=new mojo.internal.interfaceSupport.InterfaceRemoteBase(HelpBubbleHandlerPendingReceiver,handle);this.$=new mojo.internal.interfaceSupport.InterfaceRemoteBaseWrapper(this.proxy);this.onConnectionError=this.proxy.getConnectionErrorEventRouter()}helpBubbleAnchorVisibilityChanged(nativeIdentifier,visible,rect){this.proxy.sendMessage(1847129638,HelpBubbleHandler_HelpBubbleAnchorVisibilityChanged_ParamsSpec.$,null,[nativeIdentifier,visible,rect])}helpBubbleAnchorActivated(nativeIdentifier){this.proxy.sendMessage(1538969030,HelpBubbleHandler_HelpBubbleAnchorActivated_ParamsSpec.$,null,[nativeIdentifier])}helpBubbleAnchorCustomEvent(nativeIdentifier,customEventName){this.proxy.sendMessage(2035068263,HelpBubbleHandler_HelpBubbleAnchorCustomEvent_ParamsSpec.$,null,[nativeIdentifier,customEventName])}helpBubbleButtonPressed(nativeIdentifier,buttonIndex){this.proxy.sendMessage(868024728,HelpBubbleHandler_HelpBubbleButtonPressed_ParamsSpec.$,null,[nativeIdentifier,buttonIndex])}helpBubbleClosed(nativeIdentifier,reason){this.proxy.sendMessage(597655449,HelpBubbleHandler_HelpBubbleClosed_ParamsSpec.$,null,[nativeIdentifier,reason])}}class HelpBubbleClientPendingReceiver{constructor(handle){this.handle=mojo.internal.interfaceSupport.getEndpointForReceiver(handle)}bindInBrowser(scope="context"){mojo.internal.interfaceSupport.bind(this.handle,"help_bubble.mojom.HelpBubbleClient",scope)}}class HelpBubbleClientRemote{constructor(handle){this.proxy=new mojo.internal.interfaceSupport.InterfaceRemoteBase(HelpBubbleClientPendingReceiver,handle);this.$=new mojo.internal.interfaceSupport.InterfaceRemoteBaseWrapper(this.proxy);this.onConnectionError=this.proxy.getConnectionErrorEventRouter()}showHelpBubble(params){this.proxy.sendMessage(727558478,HelpBubbleClient_ShowHelpBubble_ParamsSpec.$,null,[params])}toggleFocusForAccessibility(nativeIdentifier){this.proxy.sendMessage(670394847,HelpBubbleClient_ToggleFocusForAccessibility_ParamsSpec.$,null,[nativeIdentifier])}hideHelpBubble(nativeIdentifier){this.proxy.sendMessage(401122583,HelpBubbleClient_HideHelpBubble_ParamsSpec.$,null,[nativeIdentifier])}externalHelpBubbleUpdated(nativeIdentifier,shown){this.proxy.sendMessage(332321661,HelpBubbleClient_ExternalHelpBubbleUpdated_ParamsSpec.$,null,[nativeIdentifier,shown])}}class HelpBubbleClientCallbackRouter{constructor(){this.helper_internal_=new mojo.internal.interfaceSupport.InterfaceReceiverHelperInternal(HelpBubbleClientRemote);this.$=new mojo.internal.interfaceSupport.InterfaceReceiverHelper(this.helper_internal_);this.router_=new mojo.internal.interfaceSupport.CallbackRouter;this.showHelpBubble=new mojo.internal.interfaceSupport.InterfaceCallbackReceiver(this.router_);this.helper_internal_.registerHandler(727558478,HelpBubbleClient_ShowHelpBubble_ParamsSpec.$,null,this.showHelpBubble.createReceiverHandler(false));this.toggleFocusForAccessibility=new mojo.internal.interfaceSupport.InterfaceCallbackReceiver(this.router_);this.helper_internal_.registerHandler(670394847,HelpBubbleClient_ToggleFocusForAccessibility_ParamsSpec.$,null,this.toggleFocusForAccessibility.createReceiverHandler(false));this.hideHelpBubble=new mojo.internal.interfaceSupport.InterfaceCallbackReceiver(this.router_);this.helper_internal_.registerHandler(401122583,HelpBubbleClient_HideHelpBubble_ParamsSpec.$,null,this.hideHelpBubble.createReceiverHandler(false));this.externalHelpBubbleUpdated=new mojo.internal.interfaceSupport.InterfaceCallbackReceiver(this.router_);this.helper_internal_.registerHandler(332321661,HelpBubbleClient_ExternalHelpBubbleUpdated_ParamsSpec.$,null,this.externalHelpBubbleUpdated.createReceiverHandler(false));this.onConnectionError=this.helper_internal_.getConnectionErrorEventRouter()}removeListener(id){return this.router_.removeListener(id)}}const HelpBubbleButtonParamsSpec={$:{}};const ProgressSpec={$:{}};const HelpBubbleParamsSpec={$:{}};const HelpBubbleHandlerFactory_CreateHelpBubbleHandler_ParamsSpec={$:{}};const HelpBubbleHandler_HelpBubbleAnchorVisibilityChanged_ParamsSpec={$:{}};const HelpBubbleHandler_HelpBubbleAnchorActivated_ParamsSpec={$:{}};const HelpBubbleHandler_HelpBubbleAnchorCustomEvent_ParamsSpec={$:{}};const HelpBubbleHandler_HelpBubbleButtonPressed_ParamsSpec={$:{}};const HelpBubbleHandler_HelpBubbleClosed_ParamsSpec={$:{}};const HelpBubbleClient_ShowHelpBubble_ParamsSpec={$:{}};const HelpBubbleClient_ToggleFocusForAccessibility_ParamsSpec={$:{}};const HelpBubbleClient_HideHelpBubble_ParamsSpec={$:{}};const HelpBubbleClient_ExternalHelpBubbleUpdated_ParamsSpec={$:{}};mojo.internal.Struct(HelpBubbleButtonParamsSpec.$,"HelpBubbleButtonParams",[mojo.internal.StructField("text",0,0,mojo.internal.String,null,false,0),mojo.internal.StructField("isDefault",8,0,mojo.internal.Bool,false,false,0)],[[0,24]]);mojo.internal.Struct(ProgressSpec.$,"Progress",[mojo.internal.StructField("current",0,0,mojo.internal.Uint8,0,false,0),mojo.internal.StructField("total",1,0,mojo.internal.Uint8,0,false,0)],[[0,16]]);mojo.internal.Struct(HelpBubbleParamsSpec.$,"HelpBubbleParams",[mojo.internal.StructField("nativeIdentifier",0,0,mojo.internal.String,null,false,0),mojo.internal.StructField("position",8,0,HelpBubbleArrowPositionSpec.$,HelpBubbleArrowPosition.TOP_CENTER,false,0),mojo.internal.StructField("titleText",16,0,mojo.internal.String,null,true,0),mojo.internal.StructField("bodyText",24,0,mojo.internal.String,null,false,0),mojo.internal.StructField("closeButtonAltText",32,0,mojo.internal.String,null,false,0),mojo.internal.StructField("forceCloseButton",12,0,mojo.internal.Bool,false,false,0),mojo.internal.StructField("bodyIconName",40,0,mojo.internal.String,null,true,0),mojo.internal.StructField("bodyIconAltText",48,0,mojo.internal.String,null,false,0),mojo.internal.StructField("progress",56,0,ProgressSpec.$,null,true,0),mojo.internal.StructField("buttons",64,0,mojo.internal.Array(HelpBubbleButtonParamsSpec.$,false),null,false,0),mojo.internal.StructField("timeout",72,0,TimeDeltaSpec.$,null,true,0)],[[0,88]]);mojo.internal.Struct(HelpBubbleHandlerFactory_CreateHelpBubbleHandler_ParamsSpec.$,"HelpBubbleHandlerFactory_CreateHelpBubbleHandler_Params",[mojo.internal.StructField("client",0,0,mojo.internal.InterfaceProxy(HelpBubbleClientRemote),null,false,0),mojo.internal.StructField("handler",8,0,mojo.internal.InterfaceRequest(HelpBubbleHandlerPendingReceiver),null,false,0)],[[0,24]]);mojo.internal.Struct(HelpBubbleHandler_HelpBubbleAnchorVisibilityChanged_ParamsSpec.$,"HelpBubbleHandler_HelpBubbleAnchorVisibilityChanged_Params",[mojo.internal.StructField("nativeIdentifier",0,0,mojo.internal.String,null,false,0),mojo.internal.StructField("visible",8,0,mojo.internal.Bool,false,false,0),mojo.internal.StructField("rect",16,0,RectFSpec.$,null,false,0)],[[0,32]]);mojo.internal.Struct(HelpBubbleHandler_HelpBubbleAnchorActivated_ParamsSpec.$,"HelpBubbleHandler_HelpBubbleAnchorActivated_Params",[mojo.internal.StructField("nativeIdentifier",0,0,mojo.internal.String,null,false,0)],[[0,16]]);mojo.internal.Struct(HelpBubbleHandler_HelpBubbleAnchorCustomEvent_ParamsSpec.$,"HelpBubbleHandler_HelpBubbleAnchorCustomEvent_Params",[mojo.internal.StructField("nativeIdentifier",0,0,mojo.internal.String,null,false,0),mojo.internal.StructField("customEventName",8,0,mojo.internal.String,null,false,0)],[[0,24]]);mojo.internal.Struct(HelpBubbleHandler_HelpBubbleButtonPressed_ParamsSpec.$,"HelpBubbleHandler_HelpBubbleButtonPressed_Params",[mojo.internal.StructField("nativeIdentifier",0,0,mojo.internal.String,null,false,0),mojo.internal.StructField("buttonIndex",8,0,mojo.internal.Uint8,0,false,0)],[[0,24]]);mojo.internal.Struct(HelpBubbleHandler_HelpBubbleClosed_ParamsSpec.$,"HelpBubbleHandler_HelpBubbleClosed_Params",[mojo.internal.StructField("nativeIdentifier",0,0,mojo.internal.String,null,false,0),mojo.internal.StructField("reason",8,0,HelpBubbleClosedReasonSpec.$,0,false,0)],[[0,24]]);mojo.internal.Struct(HelpBubbleClient_ShowHelpBubble_ParamsSpec.$,"HelpBubbleClient_ShowHelpBubble_Params",[mojo.internal.StructField("params",0,0,HelpBubbleParamsSpec.$,null,false,0)],[[0,16]]);mojo.internal.Struct(HelpBubbleClient_ToggleFocusForAccessibility_ParamsSpec.$,"HelpBubbleClient_ToggleFocusForAccessibility_Params",[mojo.internal.StructField("nativeIdentifier",0,0,mojo.internal.String,null,false,0)],[[0,16]]);mojo.internal.Struct(HelpBubbleClient_HideHelpBubble_ParamsSpec.$,"HelpBubbleClient_HideHelpBubble_Params",[mojo.internal.StructField("nativeIdentifier",0,0,mojo.internal.String,null,false,0)],[[0,16]]);mojo.internal.Struct(HelpBubbleClient_ExternalHelpBubbleUpdated_ParamsSpec.$,"HelpBubbleClient_ExternalHelpBubbleUpdated_Params",[mojo.internal.StructField("nativeIdentifier",0,0,mojo.internal.String,null,false,0),mojo.internal.StructField("shown",8,0,mojo.internal.Bool,false,false,0)],[[0,24]]);
  833. // Copyright 2021 The Chromium Authors
  834. const ACTION_BUTTON_ID_PREFIX="action-button-";const HELP_BUBBLE_DISMISSED_EVENT="help-bubble-dismissed";const HELP_BUBBLE_TIMED_OUT_EVENT="help-bubble-timed-out";const HELP_BUBBLE_SCROLL_ANCHOR_OPTIONS={behavior:"smooth",block:"center"};function debounceEnd(fn,time=50){let timerId;return()=>{clearTimeout(timerId);timerId=setTimeout(fn,time)}}class HelpBubbleElement extends PolymerElement{constructor(){super(...arguments);this.closeButtonTabIndex=0;this.buttons=[];this.progress=null;this.timeoutMs=null;this.timeoutTimerId=null;this.debouncedUpdate=null;this.padding=new InsetsF;this.fixed=false;this.anchorElement_=null;this.progressData_=[];this.resizeObserver_=null}static get is(){return"help-bubble"}static get template(){return getTemplate$1()}static get properties(){return{nativeId:{type:String,value:"",reflectToAttribute:true},position:{type:HelpBubbleArrowPosition,value:HelpBubbleArrowPosition.TOP_CENTER,reflectToAttribute:true}}}show(anchorElement){this.anchorElement_=anchorElement;if(this.progress){this.progressData_=new Array(this.progress.total)}else{this.progressData_=[]}this.closeButtonTabIndex=this.buttons.length?this.buttons.length+2:1;assert(this.anchorElement_,"Tried to show a help bubble but anchorElement does not exist");this.style.display="block";this.style.position=this.fixed?"fixed":"absolute";this.removeAttribute("aria-hidden");this.updatePosition_();this.debouncedUpdate=debounceEnd((()=>{if(this.anchorElement_){this.updatePosition_()}}),50);this.$.buttonlist.addEventListener("rendered-item-count-changed",this.debouncedUpdate);window.addEventListener("resize",this.debouncedUpdate);if(this.timeoutMs!==null){const timedOutCallback=()=>{this.dispatchEvent(new CustomEvent(HELP_BUBBLE_TIMED_OUT_EVENT,{detail:{nativeId:this.nativeId}}))};this.timeoutTimerId=setTimeout(timedOutCallback,this.timeoutMs)}if(this.offsetParent&&!this.fixed){this.resizeObserver_=new ResizeObserver((()=>{this.updatePosition_();this.anchorElement_?.scrollIntoView(HELP_BUBBLE_SCROLL_ANCHOR_OPTIONS)}));this.resizeObserver_.observe(this.offsetParent)}}hide(){if(this.resizeObserver_){this.resizeObserver_.disconnect();this.resizeObserver_=null}this.style.display="none";this.setAttribute("aria-hidden","true");this.anchorElement_=null;if(this.timeoutTimerId!==null){clearInterval(this.timeoutTimerId);this.timeoutTimerId=null}if(this.debouncedUpdate){window.removeEventListener("resize",this.debouncedUpdate);this.$.buttonlist.removeEventListener("rendered-item-count-changed",this.debouncedUpdate);this.debouncedUpdate=null}}getAnchorElement(){return this.anchorElement_}getButtonForTesting(buttonIndex){return this.$.buttons.querySelector(`[id="${ACTION_BUTTON_ID_PREFIX+buttonIndex}"]`)}focus(){this.$.buttonlist.render();const button=this.$.buttons.querySelector("cr-button.default-button")||this.$.buttons.querySelector("cr-button")||this.$.close;assert(button);button.focus()}static isDefaultButtonLeading(){return isWindows}dismiss_(){assert(this.nativeId,"Dismiss: expected help bubble to have a native id.");this.dispatchEvent(new CustomEvent(HELP_BUBBLE_DISMISSED_EVENT,{detail:{nativeId:this.nativeId,fromActionButton:false}}))}onKeyDown_(e){if(e.key==="Escape"){e.stopPropagation();this.dismiss_()}}blockPropagation_(e){e.stopPropagation()}getProgressClass_(index){return index<this.progress.current?"current-progress":"total-progress"}shouldShowTitleInTopContainer_(progress,titleText){return!!titleText&&!progress}shouldShowBodyInTopContainer_(progress,titleText){return!progress&&!titleText}shouldShowBodyInMain_(progress,titleText){return!!progress||!!titleText}shouldShowCloseButton_(buttons,forceCloseButton){return buttons.length===0||forceCloseButton}shouldShowBodyIcon_(bodyIconName){return bodyIconName!==null&&bodyIconName!==""}onButtonClick_(e){assert(this.nativeId,"Action button clicked: expected help bubble to have a native ID.");const index=parseInt(e.target.id.substring(ACTION_BUTTON_ID_PREFIX.length));this.dispatchEvent(new CustomEvent(HELP_BUBBLE_DISMISSED_EVENT,{detail:{nativeId:this.nativeId,fromActionButton:true,buttonIndex:index}}))}getButtonId_(index){return ACTION_BUTTON_ID_PREFIX+index}getButtonClass_(isDefault){return isDefault?"default-button":""}getButtonTabIndex_(index,isDefault){return isDefault?1:index+2}buttonSortFunc_(button1,button2){if(button1.isDefault){return isWindows?-1:1}if(button2.isDefault){return isWindows?1:-1}return 0}getArrowClass_(position){let classList="";switch(position){case HelpBubbleArrowPosition.TOP_LEFT:case HelpBubbleArrowPosition.TOP_CENTER:case HelpBubbleArrowPosition.TOP_RIGHT:classList="top-edge ";break;case HelpBubbleArrowPosition.BOTTOM_LEFT:case HelpBubbleArrowPosition.BOTTOM_CENTER:case HelpBubbleArrowPosition.BOTTOM_RIGHT:classList="bottom-edge ";break;case HelpBubbleArrowPosition.LEFT_TOP:case HelpBubbleArrowPosition.LEFT_CENTER:case HelpBubbleArrowPosition.LEFT_BOTTOM:classList="left-edge ";break;case HelpBubbleArrowPosition.RIGHT_TOP:case HelpBubbleArrowPosition.RIGHT_CENTER:case HelpBubbleArrowPosition.RIGHT_BOTTOM:classList="right-edge ";break;default:assertNotReached("Unknown help bubble position: "+position)}switch(position){case HelpBubbleArrowPosition.TOP_LEFT:case HelpBubbleArrowPosition.BOTTOM_LEFT:classList+="left-position";break;case HelpBubbleArrowPosition.TOP_CENTER:case HelpBubbleArrowPosition.BOTTOM_CENTER:classList+="horizontal-center-position";break;case HelpBubbleArrowPosition.TOP_RIGHT:case HelpBubbleArrowPosition.BOTTOM_RIGHT:classList+="right-position";break;case HelpBubbleArrowPosition.LEFT_TOP:case HelpBubbleArrowPosition.RIGHT_TOP:classList+="top-position";break;case HelpBubbleArrowPosition.LEFT_CENTER:case HelpBubbleArrowPosition.RIGHT_CENTER:classList+="vertical-center-position";break;case HelpBubbleArrowPosition.LEFT_BOTTOM:case HelpBubbleArrowPosition.RIGHT_BOTTOM:classList+="bottom-position";break;default:assertNotReached("Unknown help bubble position: "+position)}return classList}updatePosition_(){assert(this.anchorElement_,"Update position: expected valid anchor element.");const ANCHOR_OFFSET=16;const ARROW_WIDTH=16;const ARROW_OFFSET_FROM_EDGE=22+ARROW_WIDTH/2;const anchorRect=this.anchorElement_.getBoundingClientRect();const anchorRectCenter={x:anchorRect.left+anchorRect.width/2,y:anchorRect.top+anchorRect.height/2};const helpBubbleRect=this.getBoundingClientRect();let offsetX=this.anchorElement_.offsetLeft;let offsetY=this.anchorElement_.offsetTop;switch(this.position){case HelpBubbleArrowPosition.TOP_LEFT:case HelpBubbleArrowPosition.TOP_CENTER:case HelpBubbleArrowPosition.TOP_RIGHT:offsetY+=anchorRect.height+ANCHOR_OFFSET+this.padding.bottom;break;case HelpBubbleArrowPosition.BOTTOM_LEFT:case HelpBubbleArrowPosition.BOTTOM_CENTER:case HelpBubbleArrowPosition.BOTTOM_RIGHT:offsetY-=helpBubbleRect.height+ANCHOR_OFFSET+this.padding.top;break;case HelpBubbleArrowPosition.LEFT_TOP:case HelpBubbleArrowPosition.LEFT_CENTER:case HelpBubbleArrowPosition.LEFT_BOTTOM:offsetX+=anchorRect.width+ANCHOR_OFFSET+this.padding.right;break;case HelpBubbleArrowPosition.RIGHT_TOP:case HelpBubbleArrowPosition.RIGHT_CENTER:case HelpBubbleArrowPosition.RIGHT_BOTTOM:offsetX-=helpBubbleRect.width+ANCHOR_OFFSET+this.padding.left;break;default:assertNotReached()}switch(this.position){case HelpBubbleArrowPosition.TOP_LEFT:case HelpBubbleArrowPosition.BOTTOM_LEFT:if(anchorRect.left+ARROW_OFFSET_FROM_EDGE>anchorRectCenter.x){offsetX+=anchorRect.width/2-ARROW_OFFSET_FROM_EDGE}break;case HelpBubbleArrowPosition.TOP_CENTER:case HelpBubbleArrowPosition.BOTTOM_CENTER:offsetX+=anchorRect.width/2-helpBubbleRect.width/2;break;case HelpBubbleArrowPosition.TOP_RIGHT:case HelpBubbleArrowPosition.BOTTOM_RIGHT:if(anchorRect.right-ARROW_OFFSET_FROM_EDGE<anchorRectCenter.x){offsetX+=anchorRect.width/2-helpBubbleRect.width+ARROW_OFFSET_FROM_EDGE}else{offsetX+=anchorRect.width-helpBubbleRect.width}break;case HelpBubbleArrowPosition.LEFT_TOP:case HelpBubbleArrowPosition.RIGHT_TOP:if(anchorRect.top+ARROW_OFFSET_FROM_EDGE>anchorRectCenter.y){offsetY+=anchorRect.height/2-ARROW_OFFSET_FROM_EDGE}break;case HelpBubbleArrowPosition.LEFT_CENTER:case HelpBubbleArrowPosition.RIGHT_CENTER:offsetY+=anchorRect.height/2-helpBubbleRect.height/2;break;case HelpBubbleArrowPosition.LEFT_BOTTOM:case HelpBubbleArrowPosition.RIGHT_BOTTOM:if(anchorRect.bottom-ARROW_OFFSET_FROM_EDGE<anchorRectCenter.y){offsetY+=anchorRect.height/2-helpBubbleRect.height+ARROW_OFFSET_FROM_EDGE}else{offsetY+=anchorRect.height-helpBubbleRect.height}break;default:assertNotReached()}this.style.top=offsetY.toString()+"px";this.style.left=offsetX.toString()+"px"}}customElements.define(HelpBubbleElement.is,HelpBubbleElement);
  835. // Copyright 2022 The Chromium Authors
  836. const ANCHOR_HIGHLIGHT_CLASS="help-anchor-highlight";function isRtlLang(element){return window.getComputedStyle(element).direction==="rtl"}function reflectArrowPosition(position){switch(position){case HelpBubbleArrowPosition.TOP_LEFT:return HelpBubbleArrowPosition.TOP_RIGHT;case HelpBubbleArrowPosition.TOP_RIGHT:return HelpBubbleArrowPosition.TOP_LEFT;case HelpBubbleArrowPosition.BOTTOM_LEFT:return HelpBubbleArrowPosition.BOTTOM_RIGHT;case HelpBubbleArrowPosition.BOTTOM_RIGHT:return HelpBubbleArrowPosition.BOTTOM_LEFT;case HelpBubbleArrowPosition.LEFT_TOP:return HelpBubbleArrowPosition.RIGHT_TOP;case HelpBubbleArrowPosition.LEFT_CENTER:return HelpBubbleArrowPosition.RIGHT_CENTER;case HelpBubbleArrowPosition.LEFT_BOTTOM:return HelpBubbleArrowPosition.RIGHT_BOTTOM;case HelpBubbleArrowPosition.RIGHT_TOP:return HelpBubbleArrowPosition.LEFT_TOP;case HelpBubbleArrowPosition.RIGHT_CENTER:return HelpBubbleArrowPosition.LEFT_CENTER;case HelpBubbleArrowPosition.RIGHT_BOTTOM:return HelpBubbleArrowPosition.LEFT_BOTTOM;default:return position}}class HelpBubbleController{constructor(nativeId,root){this.anchor_=null;this.bubble_=null;this.options_={padding:new InsetsF,fixed:false};this.isBubbleShowing_=false;this.isAnchorVisible_=false;this.lastAnchorBounds_=new RectF;this.isExternal_=false;assert(nativeId,"HelpBubble: nativeId was not defined when registering help bubble");assert(root,"HelpBubble: shadowRoot was not defined when registering help bubble");this.nativeId_=nativeId;this.root_=root}isBubbleShowing(){return this.isBubbleShowing_}canShowBubble(){return this.hasAnchor()}hasBubble(){return!!this.bubble_}getBubble(){return this.bubble_}hasAnchor(){return!!this.anchor_}getAnchor(){return this.anchor_}getNativeId(){return this.nativeId_}getPadding(){return this.options_.padding}getAnchorVisibility(){return this.isAnchorVisible_}getLastAnchorBounds(){return this.lastAnchorBounds_}updateAnchorVisibility(isVisible,bounds){const changed=isVisible!==this.isAnchorVisible_||bounds.x!==this.lastAnchorBounds_.x||bounds.y!==this.lastAnchorBounds_.y||bounds.width!==this.lastAnchorBounds_.width||bounds.height!==this.lastAnchorBounds_.height;this.isAnchorVisible_=isVisible;this.lastAnchorBounds_=bounds;return changed}isAnchorFixed(){return this.options_.fixed}isExternal(){return this.isExternal_}updateExternalShowingStatus(isShowing){this.isExternal_=true;this.isBubbleShowing_=isShowing;this.setAnchorHighlight_(isShowing)}track(trackable,options){assert(!this.anchor_);let anchor=null;if(typeof trackable==="string"){anchor=this.root_.querySelector(trackable)}else if(Array.isArray(trackable)){anchor=this.deepQuery(trackable)}else if(trackable instanceof HTMLElement){anchor=trackable}else{assertNotReached("HelpBubble: anchor argument was unrecognized when registering "+"help bubble")}if(!anchor){return false}anchor.dataset["nativeId"]=this.nativeId_;this.anchor_=anchor;this.options_=options;return true}deepQuery(selectors){let cur=this.root_;for(const selector of selectors){if(cur.shadowRoot){cur=cur.shadowRoot}const el=cur.querySelector(selector);if(!el){return null}else{cur=el}}return cur}show(){this.isExternal_=false;if(!(this.bubble_&&this.anchor_)){return}this.bubble_.show(this.anchor_);this.isBubbleShowing_=true;this.setAnchorHighlight_(true)}hide(){if(!this.bubble_){return}this.bubble_.hide();this.bubble_.remove();this.bubble_=null;this.isBubbleShowing_=false;this.setAnchorHighlight_(false)}createBubble(params){assert(this.anchor_,"HelpBubble: anchor was not defined when showing help bubble");assert(this.anchor_.parentNode,"HelpBubble: anchor element not in DOM");this.bubble_=document.createElement("help-bubble");this.bubble_.nativeId=this.nativeId_;this.bubble_.position=isRtlLang(this.anchor_)?reflectArrowPosition(params.position):params.position;this.bubble_.closeButtonAltText=params.closeButtonAltText;this.bubble_.bodyText=params.bodyText;this.bubble_.bodyIconName=params.bodyIconName||null;this.bubble_.bodyIconAltText=params.bodyIconAltText;this.bubble_.forceCloseButton=params.forceCloseButton;this.bubble_.titleText=params.titleText||"";this.bubble_.progress=params.progress||null;this.bubble_.buttons=params.buttons;this.bubble_.padding=this.options_.padding;if(params.timeout){this.bubble_.timeoutMs=Number(params.timeout.microseconds/1000n);assert(this.bubble_.timeoutMs>0)}assert(!this.bubble_.progress||this.bubble_.progress.total>=this.bubble_.progress.current);assert(this.root_);if(getComputedStyle(this.anchor_).getPropertyValue("position")==="fixed"){this.bubble_.fixed=true}this.anchor_.parentNode.insertBefore(this.bubble_,this.anchor_);return this.bubble_}setAnchorHighlight_(highlight){assert(this.anchor_,"Set anchor highlight: expected valid anchor element.");this.anchor_.classList.toggle(ANCHOR_HIGHLIGHT_CLASS,highlight);if(highlight){(this.bubble_||this.anchor_).focus();this.anchor_.scrollIntoView(HELP_BUBBLE_SCROLL_ANCHOR_OPTIONS)}}static getImmediateAncestor(element){if(element.parentElement){return element.parentElement}if(element.parentNode instanceof ShadowRoot){return element.parentNode.host}return null}}
  837. // Copyright 2022 The Chromium Authors
  838. class HelpBubbleProxyImpl{constructor(){this.callbackRouter_=new HelpBubbleClientCallbackRouter;this.handler_=new HelpBubbleHandlerRemote;const factory=HelpBubbleHandlerFactory.getRemote();factory.createHelpBubbleHandler(this.callbackRouter_.$.bindNewPipeAndPassRemote(),this.handler_.$.bindNewPipeAndPassReceiver())}static getInstance(){return instance$1||(instance$1=new HelpBubbleProxyImpl)}static setInstance(obj){instance$1=obj}getHandler(){return this.handler_}getCallbackRouter(){return this.callbackRouter_}}let instance$1=null;
  839. // Copyright 2022 The Chromium Authors
  840. const HelpBubbleMixin=dedupingMixin((superClass=>{class HelpBubbleMixin extends superClass{constructor(...args){super(...args);this.helpBubbleControllerById_=new Map;this.helpBubbleListenerIds_=[];this.helpBubbleFixedAnchorObserver_=null;this.helpBubbleResizeObserver_=null;this.helpBubbleDismissedEventTracker_=new EventTracker;this.debouncedAnchorMayHaveChangedCallback_=null;this.helpBubbleHandler_=HelpBubbleProxyImpl.getInstance().getHandler();this.helpBubbleCallbackRouter_=HelpBubbleProxyImpl.getInstance().getCallbackRouter()}connectedCallback(){super.connectedCallback();const router=this.helpBubbleCallbackRouter_;this.helpBubbleListenerIds_.push(router.showHelpBubble.addListener(this.onShowHelpBubble_.bind(this)),router.toggleFocusForAccessibility.addListener(this.onToggleHelpBubbleFocusForAccessibility_.bind(this)),router.hideHelpBubble.addListener(this.onHideHelpBubble_.bind(this)),router.externalHelpBubbleUpdated.addListener(this.onExternalHelpBubbleUpdated_.bind(this)));const isVisible=element=>{const rect=element.getBoundingClientRect();return rect.height>0&&rect.width>0};this.debouncedAnchorMayHaveChangedCallback_=debounceEnd(this.onAnchorBoundsMayHaveChanged_.bind(this),50);this.helpBubbleResizeObserver_=new ResizeObserver((entries=>entries.forEach((({target:target})=>{if(target===document.body){if(this.debouncedAnchorMayHaveChangedCallback_){this.debouncedAnchorMayHaveChangedCallback_()}}else{this.onAnchorVisibilityChanged_(target,isVisible(target))}}))));this.helpBubbleFixedAnchorObserver_=new IntersectionObserver((entries=>entries.forEach((({target:target,isIntersecting:isIntersecting})=>this.onAnchorVisibilityChanged_(target,isIntersecting)))),{root:null});document.addEventListener("scroll",this.debouncedAnchorMayHaveChangedCallback_,{passive:true});this.helpBubbleResizeObserver_.observe(document.body);this.controllers.forEach((ctrl=>this.observeControllerAnchor_(ctrl)))}get controllers(){return Array.from(this.helpBubbleControllerById_.values())}disconnectedCallback(){super.disconnectedCallback();for(const listenerId of this.helpBubbleListenerIds_){this.helpBubbleCallbackRouter_.removeListener(listenerId)}this.helpBubbleListenerIds_=[];assert(this.helpBubbleResizeObserver_);this.helpBubbleResizeObserver_.disconnect();this.helpBubbleResizeObserver_=null;assert(this.helpBubbleFixedAnchorObserver_);this.helpBubbleFixedAnchorObserver_.disconnect();this.helpBubbleFixedAnchorObserver_=null;this.helpBubbleControllerById_.clear();if(this.debouncedAnchorMayHaveChangedCallback_){document.removeEventListener("scroll",this.debouncedAnchorMayHaveChangedCallback_);this.debouncedAnchorMayHaveChangedCallback_=null}}registerHelpBubble(nativeId,trackable,options={}){if(this.helpBubbleControllerById_.has(nativeId)){const ctrl=this.helpBubbleControllerById_.get(nativeId);if(ctrl&&ctrl.isBubbleShowing()){return null}this.unregisterHelpBubble(nativeId)}const controller=new HelpBubbleController(nativeId,this.shadowRoot);controller.track(trackable,parseOptions(options));this.helpBubbleControllerById_.set(nativeId,controller);if(this.helpBubbleResizeObserver_){this.observeControllerAnchor_(controller)}return controller}unregisterHelpBubble(nativeId){const ctrl=this.helpBubbleControllerById_.get(nativeId);if(ctrl&&ctrl.hasAnchor()){this.onAnchorVisibilityChanged_(ctrl.getAnchor(),false);this.unobserveControllerAnchor_(ctrl)}this.helpBubbleControllerById_.delete(nativeId)}observeControllerAnchor_(controller){const anchor=controller.getAnchor();assert(anchor,"Help bubble does not have anchor");if(controller.isAnchorFixed()){assert(this.helpBubbleFixedAnchorObserver_);this.helpBubbleFixedAnchorObserver_.observe(anchor)}else{assert(this.helpBubbleResizeObserver_);this.helpBubbleResizeObserver_.observe(anchor)}}unobserveControllerAnchor_(controller){const anchor=controller.getAnchor();assert(anchor,"Help bubble does not have anchor");if(controller.isAnchorFixed()){assert(this.helpBubbleFixedAnchorObserver_);this.helpBubbleFixedAnchorObserver_.unobserve(anchor)}else{assert(this.helpBubbleResizeObserver_);this.helpBubbleResizeObserver_.unobserve(anchor)}}isHelpBubbleShowing(){return this.controllers.some((ctrl=>ctrl.isBubbleShowing()))}isHelpBubbleShowingForTesting(id){const ctrls=this.controllers.filter(this.filterMatchingIdForTesting_(id));return!!ctrls[0]}getHelpBubbleForTesting(id){const ctrls=this.controllers.filter(this.filterMatchingIdForTesting_(id));return ctrls[0]?ctrls[0].getBubble():null}filterMatchingIdForTesting_(anchorId){return ctrl=>ctrl.isBubbleShowing()&&ctrl.getAnchor()!==null&&ctrl.getAnchor().id===anchorId}getSortedAnchorStatusesForTesting(){return this.controllers.sort(((a,b)=>a.getNativeId().localeCompare(b.getNativeId()))).map((ctrl=>[ctrl.getNativeId(),ctrl.hasAnchor()]))}canShowHelpBubble(controller){if(!this.helpBubbleControllerById_.has(controller.getNativeId())){return false}if(!controller.canShowBubble()){return false}const anchor=controller.getAnchor();const anchorIsUsed=this.controllers.some((otherCtrl=>otherCtrl.isBubbleShowing()&&otherCtrl.getAnchor()===anchor));return!anchorIsUsed}showHelpBubble(controller,params){assert(this.canShowHelpBubble(controller),"Can't show help bubble");const bubble=controller.createBubble(params);this.helpBubbleDismissedEventTracker_.add(bubble,HELP_BUBBLE_DISMISSED_EVENT,this.onHelpBubbleDismissed_.bind(this));this.helpBubbleDismissedEventTracker_.add(bubble,HELP_BUBBLE_TIMED_OUT_EVENT,this.onHelpBubbleTimedOut_.bind(this));controller.show()}hideHelpBubble(nativeId){const ctrl=this.helpBubbleControllerById_.get(nativeId);if(!ctrl||!ctrl.hasBubble()){return false}this.helpBubbleDismissedEventTracker_.remove(ctrl.getBubble(),HELP_BUBBLE_DISMISSED_EVENT);this.helpBubbleDismissedEventTracker_.remove(ctrl.getBubble(),HELP_BUBBLE_TIMED_OUT_EVENT);ctrl.hide();return true}notifyHelpBubbleAnchorActivated(nativeId){const ctrl=this.helpBubbleControllerById_.get(nativeId);if(!ctrl||!ctrl.isBubbleShowing()){return false}this.helpBubbleHandler_.helpBubbleAnchorActivated(nativeId);return true}notifyHelpBubbleAnchorCustomEvent(nativeId,customEvent){const ctrl=this.helpBubbleControllerById_.get(nativeId);if(!ctrl||!ctrl.isBubbleShowing()){return false}this.helpBubbleHandler_.helpBubbleAnchorCustomEvent(nativeId,customEvent);return true}onAnchorVisibilityChanged_(target,isVisible){const nativeId=target.dataset["nativeId"];assert(nativeId);const ctrl=this.helpBubbleControllerById_.get(nativeId);const hidden=this.hideHelpBubble(nativeId);if(hidden){this.helpBubbleHandler_.helpBubbleClosed(nativeId,HelpBubbleClosedReason.kPageChanged)}const bounds=isVisible?this.getElementBounds_(target):new RectF;if(!ctrl||ctrl.updateAnchorVisibility(isVisible,bounds)){this.helpBubbleHandler_.helpBubbleAnchorVisibilityChanged(nativeId,isVisible,bounds)}}onAnchorBoundsMayHaveChanged_(){for(const ctrl of this.controllers){if(ctrl.hasAnchor()&&ctrl.getAnchorVisibility()){const bounds=this.getElementBounds_(ctrl.getAnchor());if(ctrl.updateAnchorVisibility(true,bounds)){this.helpBubbleHandler_.helpBubbleAnchorVisibilityChanged(ctrl.getNativeId(),true,bounds)}}}}getElementBounds_(element){const rect=new RectF;const bounds=element.getBoundingClientRect();rect.x=bounds.x;rect.y=bounds.y;rect.width=bounds.width;rect.height=bounds.height;const nativeId=element.dataset["nativeId"];if(!nativeId){return rect}const ctrl=this.helpBubbleControllerById_.get(nativeId);if(ctrl){const padding=ctrl.getPadding();rect.x-=padding.left;rect.y-=padding.top;rect.width+=padding.left+padding.right;rect.height+=padding.top+padding.bottom}return rect}onShowHelpBubble_(params){if(!this.helpBubbleControllerById_.has(params.nativeIdentifier)){return}const ctrl=this.helpBubbleControllerById_.get(params.nativeIdentifier);this.showHelpBubble(ctrl,params)}onToggleHelpBubbleFocusForAccessibility_(nativeId){if(!this.helpBubbleControllerById_.has(nativeId)){return}const ctrl=this.helpBubbleControllerById_.get(nativeId);if(ctrl){const anchor=ctrl.getAnchor();if(anchor){anchor.focus()}}}onHideHelpBubble_(nativeId){this.hideHelpBubble(nativeId)}onExternalHelpBubbleUpdated_(nativeId,shown){if(!this.helpBubbleControllerById_.has(nativeId)){return}const ctrl=this.helpBubbleControllerById_.get(nativeId);ctrl.updateExternalShowingStatus(shown)}onHelpBubbleDismissed_(e){const nativeId=e.detail.nativeId;assert(nativeId);const hidden=this.hideHelpBubble(nativeId);assert(hidden);if(nativeId){if(e.detail.fromActionButton){this.helpBubbleHandler_.helpBubbleButtonPressed(nativeId,e.detail.buttonIndex)}else{this.helpBubbleHandler_.helpBubbleClosed(nativeId,HelpBubbleClosedReason.kDismissedByUser)}}}onHelpBubbleTimedOut_(e){const nativeId=e.detail.nativeId;const ctrl=this.helpBubbleControllerById_.get(nativeId);assert(ctrl);const hidden=this.hideHelpBubble(nativeId);assert(hidden);if(nativeId){this.helpBubbleHandler_.helpBubbleClosed(nativeId,HelpBubbleClosedReason.kTimedOut)}}}return HelpBubbleMixin}));function parseOptions(options){const padding=new InsetsF;padding.top=clampPadding(options.anchorPaddingTop);padding.left=clampPadding(options.anchorPaddingLeft);padding.bottom=clampPadding(options.anchorPaddingBottom);padding.right=clampPadding(options.anchorPaddingRight);return{padding:padding,fixed:!!options.fixed}}function clampPadding(n=0){return Math.max(0,Math.min(20,n))}function getTemplate(){return html`<!--_html_template_start_--><style include="cr-shared-style">:host{--cr-focus-outline-color:var(--color-new-tab-page-focus-ring);--ntp-theme-text-shadow:none;--ntp-one-google-bar-height:56px;--ntp-search-box-width:337px;--ntp-menu-shadow:var(--color-new-tab-page-menu-inner-shadow) 0 1px 2px 0,var(--color-new-tab-page-menu-outer-shadow) 0 2px 6px 2px;--ntp-module-width:var(--ntp-search-box-width);--ntp-module-layout-width:var(--ntp-search-box-width);--ntp-module-border-radius:5px;--ntp-protected-icon-background-color:transparent;--ntp-protected-icon-background-color-hovered:rgba(255, 255, 255, .1)}@media (min-width:560px){:host{--ntp-search-box-width:449px}}@media (min-width:672px){:host{--ntp-search-box-width:561px}}@media (min-width:804px){:host([wide-modules-enabled_]){--ntp-module-layout-width:768px;--ntp-module-width:768px}}:host([modules-redesigned-enabled_]){--ntp-module-border-radius:24px;--ntp-module-layout-width:360px;--ntp-module-width:360px}:host([modules-redesigned-layout-enabled_]){--ntp-module-layout-width:360px}@media (min-width:960px){:host([modules-redesigned-layout-enabled_]){--ntp-module-layout-width:780px}}@media (min-width:1440px){:host([modules-redesigned-layout-enabled_]){--ntp-module-layout-width:1170px}}:host([show-background-image_]){--ntp-theme-text-shadow:0 0 16px rgba(0, 0, 0, .3)}:host([show-background-image_][remove-scrim_]){--ntp-theme-text-shadow:0.5px 0.5px 1px rgba(0, 0, 0, 0.5),0px 0px 2px rgba(0, 0, 0, 0.2),0px 0px 10px rgba(0, 0, 0, 0.1);--ntp-protected-icon-background-color:rgba(0, 0, 0, .6);--ntp-protected-icon-background-color-hovered:rgba(0, 0, 0, .7)}#oneGoogleBar{height:100%;position:absolute;top:0;width:100%}#content{align-items:center;display:flex;flex-direction:column;height:calc(100vh - var(--ntp-one-google-bar-height));min-width:fit-content;padding-top:var(--ntp-one-google-bar-height);position:relative;z-index:1}#logo{margin-bottom:38px;z-index:1}#realboxContainer{display:inherit;margin-bottom:16px;position:relative}ntp-modules{flex-shrink:0;width:var(--ntp-module-layout-width)}ntp-modules:not([hidden]){animation:.3s ease-in-out fade-in-animation}@keyframes fade-in-animation{0%{opacity:0}100%{opacity:1}}ntp-middle-slot-promo{max-width:var(--ntp-search-box-width)}ntp-realbox{visibility:hidden}ntp-realbox[shown]{visibility:visible}cr-most-visited{--cr-menu-shadow:var(--ntp-menu-shadow);--most-visited-focus-shadow:var(--ntp-focus-shadow);--most-visited-text-color:var(--color-new-tab-page-most-visited-foreground);--most-visited-text-shadow:var(--ntp-theme-text-shadow)}ntp-middle-slot-promo:not([hidden])~ntp-modules{margin-top:16px}#customizeButtonContainer{background-color:var(--color-new-tab-page-button-background);border-radius:calc(.5 * var(--cr-button-height));bottom:16px;position:fixed}#customizeButtonContainer:has(help-bubble){z-index:1001}:host-context([dir=ltr]) #customizeButtonContainer{right:16px}:host-context([dir=rtl]) #customizeButtonContainer{left:16px}:host([show-background-image_]) #customizeButtonContainer{background-color:var(--ntp-protected-icon-background-color)}:host([show-background-image_]) #customizeButtonContainer:hover{background-color:var(--ntp-protected-icon-background-color-hovered)}#customizeButton{--hover-bg-color:var(--color-new-tab-page-button-background-hovered);--text-color:var(--color-new-tab-page-button-foreground);border:none;border-radius:calc(.5 * var(--cr-button-height));box-shadow:0 3px 6px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.23);font-weight:400;min-width:32px}:host([show-background-image_]) #customizeButton{box-shadow:none;padding:0}:host-context(.focus-outline-visible) #customizeButton:focus{box-shadow:var(--ntp-focus-shadow)}#customizeIcon{-webkit-mask-image:url(icons/icon_pencil.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-size:100%;background-color:var(--text-color);height:16px;margin-inline-end:8px;width:16px}:host([show-background-image_]) #customizeIcon{background-color:#fff;margin:0}@media (max-width:550px){#customizeButton{padding:0}#customizeIcon{margin:0}#customizeText{display:none}}@media (max-width:970px){:host([modules-shown-to-user]) #customizeButton{padding:0}:host([modules-shown-to-user]) #customizeIcon{margin:0}:host([modules-shown-to-user]) #customizeText{display:none}}@media (max-width:1020px){:host([modules-fre-shown]) #customizeButton{padding:0}:host([modules-fre-shown]) #customizeIcon{margin:0}:host([modules-fre-shown]) #customizeText{display:none}}#themeAttribution{align-self:flex-start;bottom:16px;color:var(--color-new-tab-page-secondary-foreground);margin-inline-start:16px;position:fixed}#backgroundImageAttribution{border-radius:8px;bottom:16px;color:var(--color-new-tab-page-attribution-foreground);line-height:20px;max-width:50vw;padding:8px;position:fixed;text-shadow:var(--ntp-theme-text-shadow);z-index:-1}:host([remove-scrim_]) #backgroundImageAttribution{background-color:var(--ntp-protected-icon-background-color);text-shadow:none}:host([remove-scrim_]) #backgroundImageAttribution:hover{background-color:var(--ntp-protected-icon-background-color-hovered)}:host-context([dir=ltr]) #backgroundImageAttribution{left:16px}:host-context([dir=rtl]) #backgroundImageAttribution{right:16px}#backgroundImageAttribution:hover{background:rgba(var(--google-grey-900-rgb),.1)}#backgroundImageAttribution1Container{align-items:center;display:flex;flex-direction:row}#linkIcon{-webkit-mask-image:url(icons/link.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-size:100%;background-color:var(--color-new-tab-page-attribution-foreground);height:16px;margin-inline-end:8px;width:16px}#backgroundImageAttribution1,#backgroundImageAttribution2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#backgroundImageAttribution1{font-size:.875rem}#backgroundImageAttribution2{font-size:.75rem}#contentBottomSpacer{flex-shrink:0;height:32px;width:1px}svg{position:fixed}ntp-lens-upload-dialog{left:0;position:absolute;right:0;top:0;z-index:101}</style>
  841. <div id="content" style="--color-new-tab-page-attribution-foreground:[[rgbaOrInherit_(theme_.textColor) ]];--color-new-tab-page-most-visited-foreground:[[rgbaOrInherit_(theme_.textColor) ]];--ntp-logo-color:[[rgbaOrInherit_(logoColor_) ]]">
  842.   <template is="dom-if" if="[[lazyRender_]]">
  843.     <template is="dom-if" if="[[oneGoogleBarEnabled_]]">
  844.       <ntp-iframe id="oneGoogleBar" src="[[oneGoogleBarIframePath_]]" hidden$="[[!oneGoogleBarLoaded_]]" allow="camera [[oneGoogleBarIframeOrigin_]]; display-capture [[oneGoogleBarIframeOrigin_]]">
  845.       </ntp-iframe>
  846.     </template>
  847.   </template>
  848.  
  849.   <ntp-logo id="logo" single-colored$="[[singleColoredLogo_]]" dark="[[theme_.isDark]]" background-color="[[backgroundColor_]]" hidden$="[[!logoEnabled_]]">
  850.   </ntp-logo>
  851.   <div id="realboxContainer">
  852.     <ntp-realbox id="realbox" is-dark="[[theme_.isDark]]" single-colored-icons="[[theme_.themeRealboxIcons]]" on-open-lens-search="onOpenLensSearch_" on-open-voice-search="onOpenVoiceSearch_" shown$="[[realboxShown_]]">
  853.     </ntp-realbox>
  854.     <template is="dom-if" if="[[showLensUploadDialog_]]" restamp>
  855.       <ntp-lens-upload-dialog id="lensUploadDialog" on-close-lens-search="onCloseLensSearch_">
  856.       </ntp-lens-upload-dialog>
  857.     </template>
  858.   </div>
  859.   <dom-if if="[[lazyRender_]]" on-dom-change="onLazyRendered_">
  860.     <template>
  861.       <template is="dom-if" if="[[shortcutsEnabled_]]">
  862.         <cr-most-visited id="mostVisited" theme="[[theme_.mostVisited]]" single-row="[[singleRowShortcutsEnabled_]]">
  863.         </cr-most-visited>
  864.       </template>
  865.       <template is="dom-if" if="[[middleSlotPromoEnabled_]]">
  866.         <ntp-middle-slot-promo on-ntp-middle-slot-promo-loaded="onMiddleSlotPromoLoaded_" hidden="[[!promoAndModulesLoaded_]]">
  867.         </ntp-middle-slot-promo>
  868.       </template>
  869.       <template is="dom-if" if="[[modulesEnabled_]]">
  870.         <ntp-modules id="modules" modules-fre-shown="{{modulesFreShown}}" modules-shown-to-user="{{modulesShownToUser}}" on-customize-module="onCustomizeModule_" on-modules-loaded="onModulesLoaded_" hidden="[[!promoAndModulesLoaded_]]">
  871.         </ntp-modules>
  872.       </template>
  873.       <a id="backgroundImageAttribution" href="[[backgroundImageAttributionUrl_]]" hidden="[[!backgroundImageAttribution1_]]">
  874.         <div id="backgroundImageAttribution1Container">
  875.           <div id="linkIcon" hidden="[[!backgroundImageAttributionUrl_]]"></div>
  876.           <div id="backgroundImageAttribution1">
  877.             [[backgroundImageAttribution1_]]
  878.           </div>
  879.         </div>
  880.         <div id="backgroundImageAttribution2" hidden="[[!backgroundImageAttribution2_]]">
  881.           [[backgroundImageAttribution2_]]
  882.         </div>
  883.       </a>
  884.      
  885.       <div id="customizeButtonContainer">
  886.         <cr-button id="customizeButton" on-click="onCustomizeClick_" title="Customize this page" aria-pressed="[[showCustomize_]]">
  887.           <div id="customizeIcon"></div>
  888.           <div id="customizeText" hidden$="[[showBackgroundImage_]]">
  889.             Customize Chrome
  890.           </div>
  891.         </cr-button>
  892.       </div>
  893.       <div id="themeAttribution" hidden$="[[!theme_.backgroundImage.attributionUrl]]">
  894.         <div>Theme created by</div>
  895.         <img src="[[theme_.backgroundImage.attributionUrl.url]]"><img>
  896.       </div>
  897.     </template>
  898.   </dom-if>
  899.   <div id="contentBottomSpacer"></div>
  900. </div>
  901. <dom-if if="[[showVoiceSearchOverlay_]]" restamp>
  902.   <template>
  903.     <ntp-voice-search-overlay on-close="onVoiceSearchOverlayClose_">
  904.     </ntp-voice-search-overlay>
  905.   </template>
  906. </dom-if>
  907. <template id="customizeDialogIf" is="dom-if" if="[[showCustomizeDialog_]]" restamp>
  908.   <ntp-customize-dialog on-close="onCustomizeDialogClose_" theme="[[theme_]]" background-selection="{{backgroundSelection_}}" selected-page="[[selectedCustomizeDialogPage_]]">
  909.   </ntp-customize-dialog>
  910. </template>
  911. <svg>
  912.   <defs>
  913.     <clipPath id="oneGoogleBarClipPath">
  914.      
  915.       <rect x="0" y="0" width="1" height="1"></rect>
  916.     </clipPath>
  917.   </defs>
  918. </svg>
  919. <!--_html_template_end_-->`}
  920. // Copyright 2016 The Chromium Authors
  921. // Use of this source code is governed by a BSD-style license that can be
  922. // found in the LICENSE file.
  923. class PromiseResolver{constructor(){this.resolve_=()=>{};this.reject_=()=>{};this.isFulfilled_=false;this.promise_=new Promise(((resolve,reject)=>{this.resolve_=resolution=>{resolve(resolution);this.isFulfilled_=true};this.reject_=reason=>{reject(reason);this.isFulfilled_=true}}))}get isFulfilled(){return this.isFulfilled_}get promise(){return this.promise_}get resolve(){return this.resolve_}get reject(){return this.reject_}}
  924. // Copyright 2020 The Chromium Authors
  925. class LoadTimeResolver{constructor(url){this.resolver_=new PromiseResolver;this.eventTracker_=new EventTracker;this.eventTracker_.add(window,"message",(({data:data})=>{if(data.frameType==="background-image"&&data.messageType==="loaded"&&url===data.url){this.resolve_(data.time)}}))}get promise(){return this.resolver_.promise}reject(){this.resolver_.reject();this.eventTracker_.removeAll()}resolve_(loadTime){this.resolver_.resolve(loadTime);this.eventTracker_.removeAll()}}let instance=null;class BackgroundManager{static getInstance(){return instance||(instance=new BackgroundManager)}static setInstance(newInstance){instance=newInstance}constructor(){this.loadTimeResolver_=null;this.backgroundImage_=strictQuery(document.body,"#backgroundImage",HTMLIFrameElement);this.url_=this.backgroundImage_.src}setShowBackgroundImage(show){document.body.toggleAttribute("show-background-image",show)}setBackgroundColor(color){document.body.style.backgroundColor=skColorToRgba(color)}setBackgroundImage(image){const url=new URL("chrome-untrusted://new-tab-page/custom_background_image");url.searchParams.append("url",image.url.url);if(image.url2x){url.searchParams.append("url2x",image.url2x.url)}if(image.size){url.searchParams.append("size",image.size)}if(image.repeatX){url.searchParams.append("repeatX",image.repeatX)}if(image.repeatY){url.searchParams.append("repeatY",image.repeatY)}if(image.positionX){url.searchParams.append("positionX",image.positionX)}if(image.positionY){url.searchParams.append("positionY",image.positionY)}if(image.scrimDisplay){url.searchParams.append("scrimDisplay",image.scrimDisplay)}if(url.href===this.url_){return}if(this.loadTimeResolver_){this.loadTimeResolver_.reject();this.loadTimeResolver_=null}this.backgroundImage_.contentWindow.location.replace(url.href);this.url_=url.href}getBackgroundImageLoadTime(){if(!this.loadTimeResolver_){this.loadTimeResolver_=new LoadTimeResolver(this.backgroundImage_.src);WindowProxy.getInstance().postMessage(this.backgroundImage_,"sendLoadTime","chrome-untrusted://new-tab-page")}return this.loadTimeResolver_.promise}}
  926. // Copyright 2019 The Chromium Authors
  927. var NtpElement;(function(NtpElement){NtpElement[NtpElement["OTHER"]=0]="OTHER";NtpElement[NtpElement["BACKGROUND"]=1]="BACKGROUND";NtpElement[NtpElement["ONE_GOOGLE_BAR"]=2]="ONE_GOOGLE_BAR";NtpElement[NtpElement["LOGO"]=3]="LOGO";NtpElement[NtpElement["REALBOX"]=4]="REALBOX";NtpElement[NtpElement["MOST_VISITED"]=5]="MOST_VISITED";NtpElement[NtpElement["MIDDLE_SLOT_PROMO"]=6]="MIDDLE_SLOT_PROMO";NtpElement[NtpElement["MODULE"]=7]="MODULE";NtpElement[NtpElement["CUSTOMIZE"]=8]="CUSTOMIZE";NtpElement[NtpElement["CUSTOMIZE_BUTTON"]=9]="CUSTOMIZE_BUTTON";NtpElement[NtpElement["CUSTOMIZE_DIALOG"]=10]="CUSTOMIZE_DIALOG"})(NtpElement||(NtpElement={}));var NtpCustomizeChromeEntryPoint;(function(NtpCustomizeChromeEntryPoint){NtpCustomizeChromeEntryPoint[NtpCustomizeChromeEntryPoint["CUSTOMIZE_BUTTON"]=0]="CUSTOMIZE_BUTTON";NtpCustomizeChromeEntryPoint[NtpCustomizeChromeEntryPoint["MODULE"]=1]="MODULE";NtpCustomizeChromeEntryPoint[NtpCustomizeChromeEntryPoint["URL"]=2]="URL"})(NtpCustomizeChromeEntryPoint||(NtpCustomizeChromeEntryPoint={}));const CUSTOMIZE_URL_PARAM="customize";const OGB_IFRAME_ORIGIN="chrome-untrusted://new-tab-page";const CUSTOMIZE_CHROME_BUTTON_ELEMENT_ID="NewTabPageUI::kCustomizeChromeButtonElementId";function recordClick(element){chrome.metricsPrivate.recordEnumerationValue("NewTabPage.Click",element,Object.keys(NtpElement).length)}function recordCustomizeChromeOpen(element){chrome.metricsPrivate.recordEnumerationValue("NewTabPage.CustomizeChromeOpened",element,Object.keys(NtpCustomizeChromeEntryPoint).length)}function ensureLazyLoaded(){const script=document.createElement("script");script.type="module";script.src=getTrustedScriptURL`./lazy_load.js`;document.body.appendChild(script)}const AppElementBase=HelpBubbleMixin(PolymerElement);class AppElement extends AppElementBase{static get is(){return"ntp-app"}static get template(){return getTemplate()}static get properties(){return{oneGoogleBarIframeOrigin_:{type:String,value:OGB_IFRAME_ORIGIN},oneGoogleBarIframePath_:{type:String,value:()=>{const params=new URLSearchParams;params.set("paramsencoded",btoa(window.location.search.replace(/^[?]/,"&")));return`${OGB_IFRAME_ORIGIN}/one-google-bar?${params}`}},theme_:{observer:"onThemeChange_",type:Object},showCustomize_:{type:Boolean,value:()=>WindowProxy.getInstance().url.searchParams.has(CUSTOMIZE_URL_PARAM)},showCustomizeDialog_:{type:Boolean,computed:"computeShowCustomizeDialog_(customizeChromeEnabled_, showCustomize_)"},selectedCustomizeDialogPage_:{type:String,value:()=>WindowProxy.getInstance().url.searchParams.get(CUSTOMIZE_URL_PARAM)},showVoiceSearchOverlay_:Boolean,showBackgroundImage_:{computed:"computeShowBackgroundImage_(theme_)",observer:"onShowBackgroundImageChange_",reflectToAttribute:true,type:Boolean},backgroundImageAttribution1_:{type:String,computed:`computeBackgroundImageAttribution1_(theme_)`},backgroundImageAttribution2_:{type:String,computed:`computeBackgroundImageAttribution2_(theme_)`},backgroundImageAttributionUrl_:{type:String,computed:`computeBackgroundImageAttributionUrl_(theme_)`},backgroundColor_:{computed:"computeBackgroundColor_(showBackgroundImage_, theme_)",type:Object},customizeChromeEnabled_:{type:Boolean,value:()=>loadTimeData.getBoolean("customizeChromeEnabled")},logoColor_:{type:String,computed:"computeLogoColor_(theme_)"},singleColoredLogo_:{computed:"computeSingleColoredLogo_(theme_)",type:Boolean},realboxLensSearchEnabled_:{type:Boolean,value:()=>loadTimeData.getBoolean("realboxLensSearch")},realboxShown_:{type:Boolean,computed:"computeRealboxShown_(theme_, showLensUploadDialog_)"},logoEnabled_:{type:Boolean,value:()=>loadTimeData.getBoolean("logoEnabled")},oneGoogleBarEnabled_:{type:Boolean,value:()=>loadTimeData.getBoolean("oneGoogleBarEnabled")},shortcutsEnabled_:{type:Boolean,value:()=>loadTimeData.getBoolean("shortcutsEnabled")},singleRowShortcutsEnabled_:{type:Boolean,value:()=>loadTimeData.getBoolean("singleRowShortcutsEnabled")},modulesFreShown:{type:Boolean,reflectToAttribute:true},modulesRedesignedLayoutEnabled_:{type:Boolean,value:()=>loadTimeData.getBoolean("modulesRedesignedLayoutEnabled"),reflectToAttribute:true},middleSlotPromoEnabled_:{type:Boolean,value:()=>loadTimeData.getBoolean("middleSlotPromoEnabled")},modulesEnabled_:{type:Boolean,value:()=>loadTimeData.getBoolean("modulesEnabled")},modulesRedesignedEnabled_:{type:Boolean,value:()=>loadTimeData.getBoolean("modulesRedesignedEnabled"),reflectToAttribute:true},wideModulesEnabled_:{type:Boolean,value:()=>loadTimeData.getBoolean("wideModulesEnabled"),reflectToAttribute:true},middleSlotPromoLoaded_:{type:Boolean,value:false},modulesLoaded_:{type:Boolean,value:false},modulesShownToUser:{type:Boolean,reflectToAttribute:true},promoAndModulesLoaded_:{type:Boolean,computed:`computePromoAndModulesLoaded_(middleSlotPromoLoaded_,\n            modulesLoaded_)`,observer:"onPromoAndModulesLoadedChange_"},removeScrim_:{type:Boolean,value:()=>loadTimeData.getBoolean("removeScrim"),reflectToAttribute:true},showLensUploadDialog_:Boolean,lazyRender_:Boolean}}static get observers(){return["udpateOneGoogleBarAppearance_(oneGoogleBarLoaded_, removeScrim_, showBackgroundImage_, theme_)"]}constructor(){performance.mark("app-creation-start");super();this.showLensUploadDialog_=false;this.setThemeListenerId_=null;this.setCustomizeChromeSidePanelVisibilityListener_=null;this.eventTracker_=new EventTracker;this.backgroundImageLoadStart_=0;this.callbackRouter_=NewTabPageProxy.getInstance().callbackRouter;this.pageHandler_=NewTabPageProxy.getInstance().handler;this.backgroundManager_=BackgroundManager.getInstance();this.shouldPrintPerformance_=new URLSearchParams(location.search).has("print_perf");this.backgroundImageLoadStartEpoch_=performance.timeOrigin;chrome.metricsPrivate.recordValue({metricName:"NewTabPage.Height",type:chrome.metricsPrivate.MetricTypeType.HISTOGRAM_LINEAR,min:1,max:1e3,buckets:200},Math.floor(window.innerHeight));chrome.metricsPrivate.recordValue({metricName:"NewTabPage.Width",type:chrome.metricsPrivate.MetricTypeType.HISTOGRAM_LINEAR,min:1,max:1920,buckets:384},Math.floor(window.innerWidth));startColorChangeUpdater()}connectedCallback(){super.connectedCallback();this.setThemeListenerId_=this.callbackRouter_.setTheme.addListener((theme=>{if(!this.theme_){this.onThemeLoaded_(theme)}performance.measure("theme-set");this.theme_=theme}));this.setCustomizeChromeSidePanelVisibilityListener_=this.callbackRouter_.setCustomizeChromeSidePanelVisibility.addListener((visible=>{this.showCustomize_=visible}));if(this.showCustomize_){this.setCustomizeChromeSidePanelVisible_(this.showCustomize_);recordCustomizeChromeOpen(NtpCustomizeChromeEntryPoint.URL)}this.eventTracker_.add(window,"message",(event=>{const data=event.data;if(typeof data!=="object"){return}if("frameType"in data&&data.frameType==="one-google-bar"){this.handleOneGoogleBarMessage_(event)}}));this.eventTracker_.add(window,"keydown",this.onWindowKeydown_.bind(this));this.eventTracker_.add(window,"click",this.onWindowClick_.bind(this),true);if(this.shouldPrintPerformance_){this.backgroundManager_.getBackgroundImageLoadTime().then((time=>{const duration=time-this.backgroundImageLoadStartEpoch_;this.printPerformanceDatum_("background-image-load",this.backgroundImageLoadStart_,duration);this.printPerformanceDatum_("background-image-loaded",this.backgroundImageLoadStart_+duration)}),(()=>{console.error("Failed to capture background image load time")}))}FocusOutlineManager.forDocument(document)}disconnectedCallback(){super.disconnectedCallback();this.callbackRouter_.removeListener(this.setThemeListenerId_);this.callbackRouter_.removeListener(this.setCustomizeChromeSidePanelVisibilityListener_);this.eventTracker_.removeAll()}ready(){super.ready();this.pageHandler_.onAppRendered(WindowProxy.getInstance().now());WindowProxy.getInstance().waitForLazyRender().then((()=>{ensureLazyLoaded();this.lazyRender_=true}));this.printPerformance_();performance.measure("app-creation","app-creation-start")}udpateOneGoogleBarAppearance_(){if(this.oneGoogleBarLoaded_){const isNtpDarkTheme=this.theme_&&(!!this.theme_.backgroundImage||this.theme_.isDark);$$(this,"#oneGoogleBar").postMessage({type:"updateAppearance",applyLightTheme:isNtpDarkTheme,applyBackgroundProtection:this.removeScrim_&&this.showBackgroundImage_&&isNtpDarkTheme})}}computeShowCustomizeDialog_(){return!this.customizeChromeEnabled_&&this.showCustomize_}computeBackgroundImageAttribution1_(){return this.theme_&&this.theme_.backgroundImageAttribution1||""}computeBackgroundImageAttribution2_(){return this.theme_&&this.theme_.backgroundImageAttribution2||""}computeBackgroundImageAttributionUrl_(){return this.theme_&&this.theme_.backgroundImageAttributionUrl?this.theme_.backgroundImageAttributionUrl.url:""}computeRealboxShown_(theme,showLensUploadDialog){return theme&&!showLensUploadDialog}computePromoAndModulesLoaded_(){return(!loadTimeData.getBoolean("middleSlotPromoEnabled")||this.middleSlotPromoLoaded_)&&(!loadTimeData.getBoolean("modulesEnabled")||this.modulesLoaded_)}async onLazyRendered_(){document.documentElement.setAttribute("lazy-loaded",String(true));this.registerHelpBubble(CUSTOMIZE_CHROME_BUTTON_ELEMENT_ID,"#customizeButton",{fixed:true});this.pageHandler_.maybeShowCustomizeChromeFeaturePromo()}onOpenVoiceSearch_(){this.showVoiceSearchOverlay_=true;recordVoiceAction(Action.ACTIVATE_SEARCH_BOX)}onOpenLensSearch_(){this.showLensUploadDialog_=true}onCloseLensSearch_(){this.showLensUploadDialog_=false}onCustomizeClick_(){this.selectedCustomizeDialogPage_=null;if(this.customizeChromeEnabled_){this.setCustomizeChromeSidePanelVisible_(!this.showCustomize_);if(!this.showCustomize_){this.pageHandler_.incrementCustomizeChromeButtonOpenCount();recordCustomizeChromeOpen(NtpCustomizeChromeEntryPoint.CUSTOMIZE_BUTTON)}}else{this.showCustomize_=true;recordCustomizeChromeOpen(NtpCustomizeChromeEntryPoint.CUSTOMIZE_BUTTON)}}onCustomizeDialogClose_(){this.showCustomize_=false;this.selectedCustomizeDialogPage_=null}onVoiceSearchOverlayClose_(){this.showVoiceSearchOverlay_=false}onWindowKeydown_(e){let ctrlKeyPressed=e.ctrlKey;if(ctrlKeyPressed&&e.code==="Period"&&e.shiftKey){this.showVoiceSearchOverlay_=true;recordVoiceAction(Action.ACTIVATE_KEYBOARD)}}rgbaOrInherit_(skColor){return skColor?skColorToRgba(skColor):"inherit"}computeShowBackgroundImage_(){return!!this.theme_&&!!this.theme_.backgroundImage}onShowBackgroundImageChange_(){this.backgroundManager_.setShowBackgroundImage(this.showBackgroundImage_)}onThemeChange_(){if(this.theme_){this.backgroundManager_.setBackgroundColor(this.theme_.backgroundColor)}this.updateBackgroundImagePath_()}onThemeLoaded_(theme){chrome.metricsPrivate.recordEnumerationValue("NewTabPage.BackgroundImageSource",theme.backgroundImage?theme.backgroundImage.imageSource:NtpBackgroundImageSource.kNoImage,NtpBackgroundImageSource.MAX_VALUE);chrome.metricsPrivate.recordSparseValueWithPersistentHash("NewTabPage.Collections.IdOnLoad",theme.backgroundImageCollectionId??"")}onPromoAndModulesLoadedChange_(){if(this.promoAndModulesLoaded_&&loadTimeData.getBoolean("modulesEnabled")){recordLoadDuration("NewTabPage.Modules.ShownTime",WindowProxy.getInstance().now())}}updateBackgroundImagePath_(){const backgroundImage=this.theme_&&this.theme_.backgroundImage;if(backgroundImage){this.backgroundManager_.setBackgroundImage(backgroundImage)}}computeBackgroundColor_(){if(this.showBackgroundImage_){return null}return this.theme_&&this.theme_.backgroundColor}computeLogoColor_(){return this.theme_&&(this.theme_.logoColor||(this.theme_.isDark?hexColorToSkColor("#ffffff"):null))}computeSingleColoredLogo_(){return this.theme_&&(!!this.theme_.logoColor||this.theme_.isDark)}canShowPromoWithBrowserCommand_(messageData,commandSource,commandOrigin){const commandId=Object.values(Command).includes(messageData.commandId)?messageData.commandId:Command.kUnknownCommand;BrowserCommandProxy.getInstance().handler.canExecuteCommand(commandId).then((({canExecute:canExecute})=>{const response={messageType:messageData.messageType,[messageData.commandId]:canExecute};commandSource.postMessage(response,commandOrigin)}))}executePromoBrowserCommand_(commandData,commandSource,commandOrigin){const commandId=Object.values(Command).includes(commandData.commandId)?commandData.commandId:Command.kUnknownCommand;BrowserCommandProxy.getInstance().handler.executeCommand(commandId,commandData.clickInfo).then((({commandExecuted:commandExecuted})=>{commandSource.postMessage(commandExecuted,commandOrigin)}))}handleOneGoogleBarMessage_(event){const data=event.data;if(data.messageType==="loaded"){const oneGoogleBar=$$(this,"#oneGoogleBar");oneGoogleBar.style.clipPath="url(#oneGoogleBarClipPath)";oneGoogleBar.style.zIndex="1000";this.oneGoogleBarLoaded_=true;this.pageHandler_.onOneGoogleBarRendered(WindowProxy.getInstance().now())}else if(data.messageType==="overlaysUpdated"){this.$.oneGoogleBarClipPath.querySelectorAll("rect").forEach((el=>{el.remove()}));const overlayRects=data.data;overlayRects.forEach((({x:x,y:y,width:width,height:height})=>{const rectElement=document.createElementNS("http://www.w3.org/2000/svg","rect");rectElement.setAttribute("x",`${x-8}`);rectElement.setAttribute("y",`${y-8}`);rectElement.setAttribute("width",`${width+16}`);rectElement.setAttribute("height",`${height+16}`);this.$.oneGoogleBarClipPath.appendChild(rectElement)}))}else if(data.messageType==="can-show-promo-with-browser-command"){this.canShowPromoWithBrowserCommand_(data,event.source,event.origin)}else if(data.messageType==="execute-browser-command"){this.executePromoBrowserCommand_(data.data,event.source,event.origin)}else if(data.messageType==="click"){recordClick(NtpElement.ONE_GOOGLE_BAR)}}onMiddleSlotPromoLoaded_(){this.middleSlotPromoLoaded_=true}onModulesLoaded_(){this.modulesLoaded_=true}onCustomizeModule_(){this.showCustomize_=true;this.selectedCustomizeDialogPage_=CustomizeDialogPage.MODULES;recordCustomizeChromeOpen(NtpCustomizeChromeEntryPoint.MODULE);this.setCustomizeChromeSidePanelVisible_(this.showCustomize_)}setCustomizeChromeSidePanelVisible_(visible){if(!this.customizeChromeEnabled_){return}let section=CustomizeChromeSection.kUnspecified;switch(this.selectedCustomizeDialogPage_){case CustomizeDialogPage.BACKGROUNDS:case CustomizeDialogPage.THEMES:section=CustomizeChromeSection.kAppearance;break;case CustomizeDialogPage.SHORTCUTS:section=CustomizeChromeSection.kShortcuts;break;case CustomizeDialogPage.MODULES:section=CustomizeChromeSection.kModules;break}this.pageHandler_.setCustomizeChromeSidePanelVisible(visible,section)}printPerformanceDatum_(name,time,auxTime=0){if(!this.shouldPrintPerformance_){return}console.info(!auxTime?`${name}: ${time}`:`${name}: ${time} (${auxTime})`)}printPerformance_(){if(!this.shouldPrintPerformance_){return}const entryTypes=["paint","measure"];const log=entry=>{this.printPerformanceDatum_(entry.name,entry.duration?entry.duration:entry.startTime,entry.duration&&entry.startTime?entry.startTime:0)};const observer=new PerformanceObserver((list=>{list.getEntries().forEach((entry=>{log(entry)}))}));observer.observe({entryTypes:entryTypes});performance.getEntries().forEach((entry=>{if(!entryTypes.includes(entry.entryType)){return}log(entry)}))}onWindowClick_(e){if(e.composedPath()&&e.composedPath()[0]===$$(this,"#content")){recordClick(NtpElement.BACKGROUND);return}for(const target of e.composedPath()){switch(target){case $$(this,"ntp-logo"):recordClick(NtpElement.LOGO);return;case $$(this,"ntp-realbox"):recordClick(NtpElement.REALBOX);return;case $$(this,"cr-most-visited"):recordClick(NtpElement.MOST_VISITED);return;case $$(this,"ntp-middle-slot-promo"):recordClick(NtpElement.MIDDLE_SLOT_PROMO);return;case $$(this,"ntp-modules"):recordClick(NtpElement.MODULE);return;case $$(this,"#customizeButton"):recordClick(NtpElement.CUSTOMIZE_BUTTON);return;case $$(this,"ntp-customize-dialog"):recordClick(NtpElement.CUSTOMIZE_DIALOG);return}}recordClick(NtpElement.OTHER)}}customElements.define(AppElement.is,AppElement);export{$$,AppElement,BackgroundManager,BrowserCommandProxy,BrowserProxyImpl,CUSTOMIZE_CHROME_BUTTON_ELEMENT_ID,CustomizeDialogPage,DoodleShareDialogElement,LogoElement,MetricsReporterImpl,NewTabPageProxy,NtpCustomizeChromeEntryPoint,NtpElement,RealboxBrowserProxy,RealboxElement,RealboxIconElement,RealboxMatchElement,Action as VoiceAction,WindowProxy,decodeString16$1 as decodeString16,getTrustedHTML,mojoString16,recordLoadDuration};
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!