| // Copyright 2023 The Chromium Authors |
| // Use of this source code is governed by a BSD-style license that can be |
| // found in the LICENSE file. |
| |
| import {$} from 'chrome://resources/js/util.js'; |
| |
| import {BrowserBridge} from './browser_bridge.js'; |
| import {DivView} from './view.js'; |
| |
| /** @type {?SharedDictionaryView} */ |
| let instance = null; |
| |
| /** |
| * This view displays information about Shared Dictionary: |
| */ |
| export class SharedDictionaryView extends DivView { |
| constructor() { |
| super(SharedDictionaryView.MAIN_BOX_ID); |
| |
| this.browserBridge_ = BrowserBridge.getInstance(); |
| |
| this.outputElement = $(SharedDictionaryView.OUTPUT_ID); |
| |
| const loadDictionary = async () => { |
| this.outputElement.innerHTML = window.trustedTypes.emptyHTML; |
| const result = await this.browserBridge_.getSharedDictionaryUsageInfo(); |
| if (result.length === 0) { |
| this.outputElement.appendChild(document.createTextNode('no data')); |
| return; |
| } |
| const resultDiv = document.createElement('div'); |
| for (const item of result) { |
| const isolationKeyDiv = document.createElement('div'); |
| isolationKeyDiv.appendChild(document.createTextNode( |
| `Isolation key : {frame_origin: ${item.frame_origin}, ` + |
| `top_frame_site: ${item.top_frame_site}}`)); |
| resultDiv.appendChild(isolationKeyDiv); |
| |
| const diskUsageDiv = document.createElement('div'); |
| diskUsageDiv.appendChild(document.createTextNode( |
| `Total usage: ${item.total_size_bytes} bytes`)); |
| resultDiv.appendChild(diskUsageDiv); |
| |
| const buttonDiv = document.createElement('div'); |
| const clearButton = document.createElement('button'); |
| clearButton.innerText = 'Clear'; |
| clearButton.classList.add( |
| 'clear-shared-dictionary-button-for-isolation'); |
| clearButton.addEventListener('click', async () => { |
| await this.browserBridge_ |
| .sendClearSharedDictionaryCacheForIsolationKey( |
| item.frame_origin, item.top_frame_site); |
| loadDictionary(); |
| }); |
| buttonDiv.appendChild(clearButton); |
| resultDiv.appendChild(buttonDiv); |
| |
| const dictsPre = document.createElement('pre'); |
| const dicts = await this.browserBridge_.getSharedDictionaryInfo( |
| item.frame_origin, item.top_frame_site); |
| dictsPre.appendChild( |
| document.createTextNode(JSON.stringify(dicts, undefined, 2))); |
| resultDiv.appendChild(dictsPre); |
| } |
| this.outputElement.appendChild(resultDiv); |
| }; |
| |
| $(SharedDictionaryView.CLEAR_ALL_BUTTON_ID).onclick = async () => { |
| await this.browserBridge_.sendClearSharedDictionary(); |
| loadDictionary(); |
| }; |
| $(SharedDictionaryView.RELOAD_BUTTON_ID).onclick = loadDictionary; |
| loadDictionary(); |
| } |
| |
| static getInstance() { |
| return instance || (instance = new SharedDictionaryView()); |
| } |
| } |
| |
| SharedDictionaryView.TAB_ID = 'tab-handle-shared-dictionary'; |
| SharedDictionaryView.TAB_NAME = 'Shared Dictionaries'; |
| SharedDictionaryView.TAB_HASH = '#sharedDictionary'; |
| |
| // IDs for special HTML elements in index.html |
| SharedDictionaryView.MAIN_BOX_ID = 'shared-dictionary-view-tab-content'; |
| |
| SharedDictionaryView.CLEAR_ALL_BUTTON_ID = 'shared-dictionary-view-clear-all'; |
| SharedDictionaryView.RELOAD_BUTTON_ID = 'shared-dictionary-reload'; |
| SharedDictionaryView.OUTPUT_ID = 'shared-dictionary-output'; |