<!--_html_template_end_-->}static get properties(){return{useWhiteAddIcon:{type:Boolean,reflectToAttribute:true},useTitlePill:{type:Boolean,reflectToAttribute:true},columnCount_:{type:Number,computed:computeColumnCount(tiles, screenWidth, maxTiles,\n visible)`},rowCount:{type:Number,computed:"computeRowCount(columnCount, tiles)"},customLinksEnabled:Boolean,dialogTileTitle:String,dialogTileUrl:{type:String,observer:"onDialogTileUrlChange"},dialogTileUrlInvalid:{type:Boolean,value:false},dialogTitle:String,reordering:{type:Boolean,value:false,reflectToAttribute:true},maxTiles:{type:Number,computed:"computeMaxTiles(visible, customLinksEnabled)"},showAdd:{type:Boolean,value:false,computed:"computeShowAdd(tiles, columnCount, customLinksEnabled)"},showToastButtons:Boolean,screenWidth:Number,tiles:Array,toastContent:String,visible:{type:Boolean,reflectToAttribute:true}}}get tileElements(){return Array.from(this.shadowRoot.querySelectorAll(".tile:not([hidden])"))}constructor(){performance.mark("most-visited-creation-start");super();this.adding=false;const{callbackRouter:callbackRouter,handler:handler}=BrowserProxy.getInstance();this.callbackRouter=callbackRouter;this.pageHandler=handler;this.setMostVisitedInfoListenerId=null;this.actionMenuTargetIndex=-1;this.dragOffset=null;this.tileRects=[]}connectedCallback(){super.connectedCallback();this.isRtl=window.getComputedStyle(this)["direction"]==="rtl";this.eventTracker=new EventTracker;this.setMostVisitedInfoListenerId=this.callbackRouter.setMostVisitedInfo.addListener(info=>{performance.measure("most-visited-mojo","most-visited-mojo-start");this.visible=info.visible;this.customLinksEnabled=info.customLinksEnabled;this.tiles=info.tiles.slice(0,10)});performance.mark("most-visited-mojo-start");this.eventTracker.add(document,"visibilitychange",()=>{if(document.visibilityState==="visible"){this.pageHandler.updateMostVisitedInfo()}});this.pageHandler.updateMostVisitedInfo();FocusOutlineManager.forDocument(document)}disconnectedCallback(){super.disconnectedCallback();this.callbackRouter.removeListener(assert(this.setMostVisitedInfoListenerId));this.mediaListenerWideWidth.removeListener(assert(this.boundOnWidthChange));this.mediaListenerMediumWidth.removeListener(assert(this.boundOnWidthChange));this.ownerDocument.removeEventListener("keydown",this.boundOnDocumentKeyDown);this.eventTracker.removeAll()}ready(){super.ready();this.boundOnWidthChange=this.updateScreenWidth.bind(this);const{matchMedia:matchMedia}=BrowserProxy.getInstance();this.mediaListenerWideWidth=matchMedia("(min-width: 672px)");this.mediaListenerWideWidth.addListener(this.boundOnWidthChange);this.mediaListenerMediumWidth=matchMedia("(min-width: 560px)");this.mediaListenerMediumWidth.addListener(this.boundOnWidthChange);this.updateScreenWidth();this.boundOnDocumentKeyDown=(e=>this.onDocumentKeyDown(e));this.ownerDocument.addEventListener("keydown",this.boundOnDocumentKeyDown);performance.measure("most-visited-creation","most-visited-creation-start")}clearForceHover(){const forceHover=this.shadowRoot.querySelector(".force-hover");if(forceHover){forceHover.classList.remove("force-hover")}}computeColumnCount(){if(!this.visible){return 0}let maxColumns=3;if(this.screenWidth===ScreenWidth.WIDE){maxColumns=5}else if(this.screenWidth===ScreenWidth.MEDIUM){maxColumns=4}const shortcutCount=this.tiles?this.tiles.length:0;const canShowAdd=this.maxTiles>shortcutCount;const tileCount=Math.min(this.maxTiles,shortcutCount+(canShowAdd?1:0));const columnCount=tileCount<=maxColumns?tileCount:Math.min(maxColumns,Math.ceil(tileCount/2));return columnCount||3}computeRowCount(){if(this.columnCount===0){return 0}const shortcutCount=this.tiles?this.tiles.length:0;return this.columnCount<=shortcutCount?2:1}computeMaxTiles(){return!this.visible?0:this.customLinksEnabled?10:8}computeShowAdd(){return this.customLinksEnabled&&this.tiles&&this.tiles.length<this.columnCount2}dragEnd(x,y){this.dragOffset=null;const dragElement=this.shadowRoot.querySelector(".tile.dragging");if(!dragElement){this.reordering=false;return}const dragIndex=this.$.tiles.modelForElement(dragElement).index;dragElement.classList.remove("dragging");this.tileElements.forEach(resetTilePosition);resetTilePosition(this.$.addShortcut);const dropIndex=getHitIndex(this.tileRects,x,y);if(dragIndex!==dropIndex&&dropIndex>-1){const[draggingTile]=this.tiles.splice(dragIndex,1);this.tiles.splice(dropIndex,0,draggingTile);this.notifySplices("tiles",[{index:dragIndex,removed:[draggingTile],addedCount:0,object:this.tiles,type:"splice"},{index:dropIndex,removed:[],addedCount:1,object:this.tiles,type:"splice"}]);this.pageHandler.reorderMostVisitedTile(draggingTile.url,dropIndex)}}dragOver(x,y){const dragElement=this.shadowRoot.querySelector(".tile.dragging");if(!dragElement){this.reordering=false;return}const dragIndex=this.$.tiles.modelForElement(dragElement).index;setTilePosition(dragElement,{x:x-this.dragOffset.x,y:y-this.dragOffset.y});const dropIndex=getHitIndex(this.tileRects,x,y);this.tileElements.forEach((element,i)=>{let positionIndex;if(i===dragIndex){return}else if(dropIndex===-1){positionIndex=i}else if(dragIndex<dropIndex&&dragIndex<=i&&i<=dropIndex){positionIndex=i-1}else if(dragIndex>dropIndex&&dragIndex>=i&&i>=dropIndex){positionIndex=i+1}else{positionIndex=i}setTilePosition(element,this.tileRects[positionIndex])})}dragStart(dragElement,x,y){this.clearForceHover();dragElement.classList.add("dragging");const dragElementRect=dragElement.getBoundingClientRect();this.dragOffset={x:x-dragElementRect.x,y:y-dragElementRect.y};const tileElements=this.tileElements;this.tileRects=tileElements.map(t=>t.getBoundingClientRect());if(this.showAdd){const element=this.$.addShortcut;setTilePosition(element,element.getBoundingClientRect())}tileElements.forEach((tile,i)=>{setTilePosition(tile,this.tileRects[i])});this.reordering=true}getFaviconUrl_(url){const faviconUrl=new URL("chrome://favicon2/");faviconUrl.searchParams.set("size","24");faviconUrl.searchParams.set("scale_factor","1x");faviconUrl.searchParams.set("show_fallback_monogram","");faviconUrl.searchParams.set("pageurl",url.url);return faviconUrl.href}getRestoreButtonText(){return loadTimeData.getString(this.customLinksEnabled?"restoreDefaultLinks":"restoreThumbnailsShort")}getTileTitleDirectionClass(tile){return tile.titleDirection===mojoBase.mojom.TextDirection.RIGHT_TOLEFT?"title-rtl":"title-ltr"}isHidden(index){return index>=this.columnCount_2}onAdd(){this.dialogTitle=loadTimeData.getString("addLinkTitle");this.dialogTileTitle="";this.dialogTileUrl="";this.dialogTileUrlInvalid=false;this.adding=true;this.$.dialog.showModal()}onAddShortcutKeyDown(e){if(e.altKey||e.shiftKey||e.metaKey||e.ctrlKey){return}if(!this.tiles||this.tiles.length===0){return}const backKey=this.isRtl?"ArrowRight":"ArrowLeft";if(e.key===backKey||e.key==="ArrowUp"){this.tileFocus(this.tiles.length-1)}}onDialogCancel(){this.actionMenuTargetIndex=-1;this.$.dialog.cancel()}onDialogClose(){if(this.adding){this.$.addShortcut.focus()}this.adding=false}onDialogTileUrlChange(){this.dialogTileUrlInvalid=false}onDocumentKeyDown(e){if(e.altKey||e.shiftKey){return}const modifier=isMac?e.metaKey&&!e.ctrlKey:e.ctrlKey&&!e.metaKey;if(modifier&&e.key==="z"){e.preventDefault();this.pageHandler.undoMostVisitedTileAction();this.$.toast.hide()}}onDragStart(e){if(e.dataTransfer){e.dataTransfer.setDragImage(new Image,0,0)}this.dragStart(e.target,e.x,e.y);const dragOver=e=>{e.preventDefault();e.dataTransfer.dropEffect="move";this.dragOver(e.x,e.y)};this.ownerDocument.addEventListener("dragover",dragOver);this.ownerDocument.addEventListener("dragend",e=>{this.ownerDocument.removeEventListener("dragover",dragOver);this.dragEnd(e.x,e.y);const dropIndex=getHitIndex(this.tileRects,e.x,e.y);if(dropIndex!==-1){this.tileElements_[dropIndex].classList.add("force-hov