mapperTabPage.js 3.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.log = exports.generatePage = void 0;
  4. /**
  5. * Copyright 2022 Google LLC.
  6. * Copyright (c) Microsoft Corporation.
  7. *
  8. * Licensed under the Apache License, Version 2.0 (the "License");
  9. * you may not use this file except in compliance with the License.
  10. * You may obtain a copy of the License at
  11. *
  12. * http://www.apache.org/licenses/LICENSE-2.0
  13. *
  14. * Unless required by applicable law or agreed to in writing, software
  15. * distributed under the License is distributed on an "AS IS" BASIS,
  16. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17. * See the License for the specific language governing permissions and
  18. * limitations under the License.
  19. */
  20. const log_js_1 = require("../utils/log.js");
  21. /** HTML source code for the user-facing Mapper tab. */
  22. const mapperPageSource = '<!DOCTYPE html><title>BiDi-CDP Mapper</title><style>body{font-family: Roboto, serif; font-size: 13px; color: #202124;}.log{padding: 12px; font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; font-size: 11px; line-height: 180%; background: #f1f3f4; border-radius: 4px;}.pre{overflow-wrap: break-word; padding: 10px;}.card{margin: 60px auto; padding: 2px 0; max-width: 900px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), 0 1px 6px rgba(0, 0, 0, 0.2); border-radius: 8px;}.divider{height: 1px; background: #f0f0f0;}.item{padding: 16px 20px;}</style><div class="card"><div class="item"><h1>BiDi-CDP Mapper is controlling this tab</h1><p>Closing or reloading it will stop the BiDi process. <a target="_blank" title="BiDi-CDP Mapper GitHub Repository" href="https://github.com/GoogleChromeLabs/chromium-bidi">Details.</a></p></div><div class="divider"></div><details id="details"><summary class="item">Debug information</summary></details></div>';
  23. /**
  24. * The following piece of HTML should be added to the `debug` element:
  25. *
  26. * <div class="divider"></div>
  27. * <div class="item">
  28. * <h3>${name}</h3>
  29. * <div id="${name}_log" class="log">
  30. */
  31. function findOrCreateTypeLogContainer(logType) {
  32. const containerId = `${logType}_log`;
  33. const existingContainer = document.getElementById(containerId);
  34. if (existingContainer) {
  35. return existingContainer;
  36. }
  37. const debugElement = document.getElementById('details');
  38. const divider = document.createElement('div');
  39. divider.className = 'divider';
  40. debugElement.appendChild(divider);
  41. const htmlItem = document.createElement('div');
  42. htmlItem.className = 'item';
  43. htmlItem.innerHTML = `<h3>${logType}</h3><div id="${containerId}" class="log"></div>`;
  44. debugElement.appendChild(htmlItem);
  45. return document.getElementById(containerId);
  46. }
  47. function generatePage() {
  48. // If run not in browser (e.g. unit test), do nothing.
  49. if (!globalThis.document.documentElement) {
  50. return;
  51. }
  52. globalThis.document.documentElement.innerHTML = mapperPageSource;
  53. // Create main log containers in proper order.
  54. findOrCreateTypeLogContainer(log_js_1.LogType.system);
  55. findOrCreateTypeLogContainer(log_js_1.LogType.bidi);
  56. findOrCreateTypeLogContainer(log_js_1.LogType.browsingContexts);
  57. findOrCreateTypeLogContainer(log_js_1.LogType.cdp);
  58. }
  59. exports.generatePage = generatePage;
  60. function log(logType, ...messages) {
  61. // If run not in browser (e.g. unit test), do nothing.
  62. if (!globalThis.document.documentElement) {
  63. return;
  64. }
  65. // If `sendDebugMessage` is defined, send the log message there.
  66. global.window?.sendDebugMessage?.(JSON.stringify({ logType, messages }));
  67. const typeLogContainer = findOrCreateTypeLogContainer(logType);
  68. // This piece of HTML should be added:
  69. // <div class="pre">...log message...</div>
  70. const lineElement = document.createElement('div');
  71. lineElement.className = 'pre';
  72. lineElement.textContent = messages.join(' ');
  73. typeLogContainer.appendChild(lineElement);
  74. }
  75. exports.log = log;
  76. //# sourceMappingURL=mapperTabPage.js.map