mapperTabPage.js 4.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  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(logPrefix) {
  32. const logType = logPrefix.split(':')[0];
  33. const containerId = `${logType}_log`;
  34. const existingContainer = document.getElementById(containerId);
  35. if (existingContainer) {
  36. return existingContainer;
  37. }
  38. const debugElement = document.getElementById('details');
  39. const divider = document.createElement('div');
  40. divider.className = 'divider';
  41. debugElement.appendChild(divider);
  42. const htmlItem = document.createElement('div');
  43. htmlItem.className = 'item';
  44. htmlItem.innerHTML = `<h3>${logType}</h3><div id="${containerId}" class="log"></div>`;
  45. debugElement.appendChild(htmlItem);
  46. return document.getElementById(containerId);
  47. }
  48. function generatePage() {
  49. // If run not in browser (e.g. unit test), do nothing.
  50. if (!globalThis.document.documentElement) {
  51. return;
  52. }
  53. globalThis.document.documentElement.innerHTML = mapperPageSource;
  54. // Create main log containers in proper order.
  55. findOrCreateTypeLogContainer(log_js_1.LogType.debugInfo);
  56. findOrCreateTypeLogContainer(log_js_1.LogType.bidi);
  57. findOrCreateTypeLogContainer(log_js_1.LogType.cdp);
  58. }
  59. exports.generatePage = generatePage;
  60. function stringify(message) {
  61. if (typeof message === 'object') {
  62. return JSON.stringify(message, null, 2);
  63. }
  64. return message;
  65. }
  66. function log(logPrefix, ...messages) {
  67. // If run not in browser (e.g. unit test), do nothing.
  68. if (!globalThis.document.documentElement) {
  69. return;
  70. }
  71. // Skip sending BiDi logs as they are logged once by `bidi:server:*`
  72. if (!logPrefix.startsWith(log_js_1.LogType.bidi)) {
  73. // If `sendDebugMessage` is defined, send the log message there.
  74. globalThis.window?.sendDebugMessage?.(JSON.stringify({ logType: logPrefix, messages }));
  75. }
  76. const typeLogContainer = findOrCreateTypeLogContainer(logPrefix);
  77. // This piece of HTML should be added:
  78. // <div class="pre">...log message...</div>
  79. const lineElement = document.createElement('div');
  80. lineElement.className = 'pre';
  81. lineElement.textContent = [logPrefix, ...messages].map(stringify).join(' ');
  82. typeLogContainer.appendChild(lineElement);
  83. if (typeLogContainer.childNodes.length > 200) {
  84. typeLogContainer.removeChild(typeLogContainer.childNodes[0]);
  85. }
  86. }
  87. exports.log = log;
  88. //# sourceMappingURL=mapperTabPage.js.map