How to use createChild method in Playwright Internal

Best JavaScript code snippet using playwright-internal

DevicesView.js

Source:DevicesView.js Github

copy

Full Screen

...8 constructor() {9 super(true);10 this.registerRequiredCSS('devices/​devicesView.css');11 this.contentElement.classList.add('devices-view');12 var hbox = this.contentElement.createChild('div', 'hbox devices-container');13 var sidebar = hbox.createChild('div', 'devices-sidebar');14 sidebar.createChild('div', 'devices-view-title').createTextChild(Common.UIString('Devices'));15 this._sidebarList = sidebar.createChild('div', 'devices-sidebar-list');16 this._discoveryView = new Devices.DevicesView.DiscoveryView();17 this._sidebarListSpacer = this._sidebarList.createChild('div', 'devices-sidebar-spacer');18 this._discoveryListItem = this._sidebarList.createChild('div', 'devices-sidebar-item');19 this._discoveryListItem.textContent = Common.UIString('Settings');20 this._discoveryListItem.addEventListener(21 'click', this._selectSidebarListItem.bind(this, this._discoveryListItem, this._discoveryView));22 /​** @type {!Map<string, !Devices.DevicesView.DeviceView>} */​23 this._viewById = new Map();24 /​** @type {!Array<!Adb.Device>} */​25 this._devices = [];26 /​** @type {!Map<string, !Element>} */​27 this._listItemById = new Map();28 this._viewContainer = hbox.createChild('div', 'flex-auto vbox');29 var discoveryFooter = this.contentElement.createChild('div', 'devices-footer');30 this._deviceCountSpan = discoveryFooter.createChild('span');31 discoveryFooter.createChild('span').textContent = Common.UIString(' Read ');32 discoveryFooter.appendChild(UI.createExternalLink(33 'https:/​/​developers.google.com/​chrome-developer-tools/​docs/​remote-debugging',34 Common.UIString('remote debugging documentation')));35 discoveryFooter.createChild('span').textContent = Common.UIString(' for more information.');36 this._updateFooter();37 this._selectSidebarListItem(this._discoveryListItem, this._discoveryView);38 InspectorFrontendHost.events.addEventListener(39 InspectorFrontendHostAPI.Events.DevicesUpdated, this._devicesUpdated, this);40 InspectorFrontendHost.events.addEventListener(41 InspectorFrontendHostAPI.Events.DevicesDiscoveryConfigChanged, this._devicesDiscoveryConfigChanged, this);42 InspectorFrontendHost.events.addEventListener(43 InspectorFrontendHostAPI.Events.DevicesPortForwardingStatusChanged, this._devicesPortForwardingStatusChanged,44 this);45 this.contentElement.tabIndex = 0;46 this.setDefaultFocusedElement(this.contentElement);47 }48 /​**49 * @return {!Devices.DevicesView}50 */​51 static _instance() {52 if (!Devices.DevicesView._instanceObject)53 Devices.DevicesView._instanceObject = new Devices.DevicesView();54 return Devices.DevicesView._instanceObject;55 }56 /​**57 * @param {!Element} listItem58 * @param {!UI.Widget} view59 */​60 _selectSidebarListItem(listItem, view) {61 if (this._selectedListItem === listItem)62 return;63 if (this._selectedListItem) {64 this._selectedListItem.classList.remove('selected');65 this._visibleView.detach();66 }67 this._visibleView = view;68 this._selectedListItem = listItem;69 this._visibleView.show(this._viewContainer);70 this._selectedListItem.classList.add('selected');71 }72 /​**73 * @param {!Common.Event} event74 */​75 _devicesUpdated(event) {76 this._devices =77 /​** @type {!Array.<!Adb.Device>} */​ (event.data).slice().filter(d => d.adbSerial.toUpperCase() !== 'WEBRTC');78 for (var device of this._devices) {79 if (!device.adbConnected)80 device.adbModel = Common.UIString('Unknown');81 }82 var ids = new Set();83 for (var device of this._devices)84 ids.add(device.id);85 var selectedRemoved = false;86 for (var deviceId of this._viewById.keys()) {87 if (!ids.has(deviceId)) {88 var listItem = /​** @type {!Element} */​ (this._listItemById.get(deviceId));89 this._listItemById.remove(deviceId);90 this._viewById.remove(deviceId);91 listItem.remove();92 if (listItem === this._selectedListItem)93 selectedRemoved = true;94 }95 }96 for (var device of this._devices) {97 var view = this._viewById.get(device.id);98 var listItem = this._listItemById.get(device.id);99 if (!view) {100 view = new Devices.DevicesView.DeviceView();101 this._viewById.set(device.id, view);102 listItem = this._createSidebarListItem(view);103 this._listItemById.set(device.id, listItem);104 this._sidebarList.insertBefore(listItem, this._sidebarListSpacer);105 }106 listItem._title.textContent = device.adbModel;107 listItem._status.textContent =108 device.adbConnected ? Common.UIString('Connected') : Common.UIString('Pending Authorization');109 listItem.classList.toggle('device-connected', device.adbConnected);110 view.update(device);111 }112 if (selectedRemoved)113 this._selectSidebarListItem(this._discoveryListItem, this._discoveryView);114 this._updateFooter();115 }116 /​**117 * @param {!UI.Widget} view118 * @return {!Element}119 */​120 _createSidebarListItem(view) {121 var listItem = createElementWithClass('div', 'devices-sidebar-item');122 listItem.addEventListener('click', this._selectSidebarListItem.bind(this, listItem, view));123 listItem._title = listItem.createChild('div', 'devices-sidebar-item-title');124 listItem._status = listItem.createChild('div', 'devices-sidebar-item-status');125 return listItem;126 }127 /​**128 * @param {!Common.Event} event129 */​130 _devicesDiscoveryConfigChanged(event) {131 var discoverUsbDevices = /​** @type {boolean} */​ (event.data['discoverUsbDevices']);132 var portForwardingEnabled = /​** @type {boolean} */​ (event.data['portForwardingEnabled']);133 var portForwardingConfig = /​** @type {!Adb.PortForwardingConfig} */​ (event.data['portForwardingConfig']);134 this._discoveryView.discoveryConfigChanged(discoverUsbDevices, portForwardingEnabled, portForwardingConfig);135 }136 /​**137 * @param {!Common.Event} event138 */​139 _devicesPortForwardingStatusChanged(event) {140 var status = /​** @type {!Adb.PortForwardingStatus} */​ (event.data);141 for (var deviceId in status) {142 var view = this._viewById.get(deviceId);143 if (view)144 view.portForwardingStatusChanged(status[deviceId]);145 }146 for (var deviceId of this._viewById.keys()) {147 var view = this._viewById.get(deviceId);148 if (view && !(deviceId in status))149 view.portForwardingStatusChanged({ports: {}, browserId: ''});150 }151 }152 _updateFooter() {153 this._deviceCountSpan.textContent = !this._devices.length ?154 Common.UIString('No devices detected.') :155 this._devices.length === 1 ? Common.UIString('1 device detected.') :156 Common.UIString('%d devices detected.', this._devices.length);157 }158 /​**159 * @override160 */​161 wasShown() {162 super.wasShown();163 InspectorFrontendHost.setDevicesUpdatesEnabled(true);164 }165 /​**166 * @override167 */​168 willHide() {169 super.wasShown();170 InspectorFrontendHost.setDevicesUpdatesEnabled(false);171 }172};173/​**174 * @implements {UI.ListWidget.Delegate}175 * @unrestricted176 */​177Devices.DevicesView.DiscoveryView = class extends UI.VBox {178 constructor() {179 super();180 this.setMinimumSize(100, 100);181 this.element.classList.add('discovery-view');182 this.contentElement.createChild('div', 'hbox device-text-row').createChild('div', 'view-title').textContent =183 Common.UIString('Settings');184 var discoverUsbDevicesCheckbox = createCheckboxLabel(Common.UIString('Discover USB devices'));185 discoverUsbDevicesCheckbox.classList.add('usb-checkbox');186 this.element.appendChild(discoverUsbDevicesCheckbox);187 this._discoverUsbDevicesCheckbox = discoverUsbDevicesCheckbox.checkboxElement;188 this._discoverUsbDevicesCheckbox.addEventListener('click', this._updateDiscoveryConfig.bind(this), false);189 var help = this.element.createChild('div', 'discovery-help');190 help.createChild('span').textContent = Common.UIString('Need help? Read Chrome ');191 help.appendChild(UI.createExternalLink(192 'https:/​/​developers.google.com/​chrome-developer-tools/​docs/​remote-debugging',193 Common.UIString('remote debugging documentation.')));194 var portForwardingHeader = this.element.createChild('div', 'port-forwarding-header');195 var portForwardingEnabledCheckbox = createCheckboxLabel(Common.UIString('Port forwarding'));196 portForwardingEnabledCheckbox.classList.add('port-forwarding-checkbox');197 portForwardingHeader.appendChild(portForwardingEnabledCheckbox);198 this._portForwardingEnabledCheckbox = portForwardingEnabledCheckbox.checkboxElement;199 this._portForwardingEnabledCheckbox.addEventListener('click', this._updateDiscoveryConfig.bind(this), false);200 var portForwardingFooter = this.element.createChild('div', 'port-forwarding-footer');201 portForwardingFooter.createChild('span').textContent = Common.UIString(202 'Define the listening port on your device that maps to a port accessible from your development machine. ');203 portForwardingFooter.appendChild(UI.createExternalLink(204 'https:/​/​developer.chrome.com/​devtools/​docs/​remote-debugging#port-forwarding', Common.UIString('Learn more')));205 this._list = new UI.ListWidget(this);206 this._list.registerRequiredCSS('devices/​devicesView.css');207 this._list.element.classList.add('port-forwarding-list');208 var placeholder = createElementWithClass('div', 'port-forwarding-list-empty');209 placeholder.textContent = Common.UIString('No rules');210 this._list.setEmptyPlaceholder(placeholder);211 this._list.show(this.element);212 this.element.appendChild(213 createTextButton(Common.UIString('Add rule'), this._addRuleButtonClicked.bind(this), 'add-rule-button'));214 /​** @type {!Array<!Adb.PortForwardingRule>} */​215 this._portForwardingConfig = [];216 }217 _addRuleButtonClicked() {218 this._list.addNewItem(this._portForwardingConfig.length, {port: '', address: ''});219 }220 /​**221 * @param {boolean} discoverUsbDevices222 * @param {boolean} portForwardingEnabled223 * @param {!Adb.PortForwardingConfig} portForwardingConfig224 */​225 discoveryConfigChanged(discoverUsbDevices, portForwardingEnabled, portForwardingConfig) {226 this._discoverUsbDevicesCheckbox.checked = discoverUsbDevices;227 this._portForwardingEnabledCheckbox.checked = portForwardingEnabled;228 this._portForwardingConfig = [];229 this._list.clear();230 for (var key of Object.keys(portForwardingConfig)) {231 var rule = /​** @type {!Adb.PortForwardingRule} */​ ({port: key, address: portForwardingConfig[key]});232 this._portForwardingConfig.push(rule);233 this._list.appendItem(rule, true);234 }235 }236 /​**237 * @override238 * @param {*} item239 * @param {boolean} editable240 * @return {!Element}241 */​242 renderItem(item, editable) {243 var rule = /​** @type {!Adb.PortForwardingRule} */​ (item);244 var element = createElementWithClass('div', 'port-forwarding-list-item');245 var port = element.createChild('div', 'port-forwarding-value port-forwarding-port');246 port.createChild('span', 'port-localhost').textContent = Common.UIString('localhost:');247 port.createTextChild(rule.port);248 element.createChild('div', 'port-forwarding-separator');249 element.createChild('div', 'port-forwarding-value').textContent = rule.address;250 return element;251 }252 /​**253 * @override254 * @param {*} item255 * @param {number} index256 */​257 removeItemRequested(item, index) {258 this._portForwardingConfig.splice(index, 1);259 this._list.removeItem(index);260 this._updateDiscoveryConfig();261 }262 /​**263 * @override264 * @param {*} item265 * @param {!UI.ListWidget.Editor} editor266 * @param {boolean} isNew267 */​268 commitEdit(item, editor, isNew) {269 var rule = /​** @type {!Adb.PortForwardingRule} */​ (item);270 rule.port = editor.control('port').value.trim();271 rule.address = editor.control('address').value.trim();272 if (isNew)273 this._portForwardingConfig.push(rule);274 this._updateDiscoveryConfig();275 }276 /​**277 * @override278 * @param {*} item279 * @return {!UI.ListWidget.Editor}280 */​281 beginEdit(item) {282 var rule = /​** @type {!Adb.PortForwardingRule} */​ (item);283 var editor = this._createEditor();284 editor.control('port').value = rule.port;285 editor.control('address').value = rule.address;286 return editor;287 }288 /​**289 * @return {!UI.ListWidget.Editor}290 */​291 _createEditor() {292 if (this._editor)293 return this._editor;294 var editor = new UI.ListWidget.Editor();295 this._editor = editor;296 var content = editor.contentElement();297 var fields = content.createChild('div', 'port-forwarding-edit-row');298 fields.createChild('div', 'port-forwarding-value port-forwarding-port')299 .appendChild(editor.createInput('port', 'text', 'Device port (3333)', portValidator.bind(this)));300 fields.createChild('div', 'port-forwarding-separator port-forwarding-separator-invisible');301 fields.createChild('div', 'port-forwarding-value')302 .appendChild(editor.createInput('address', 'text', 'Local address (dev.example.corp:3333)', addressValidator));303 return editor;304 /​**305 * @param {*} item306 * @param {number} index307 * @param {!HTMLInputElement|!HTMLSelectElement} input308 * @this {Devices.DevicesView.DiscoveryView}309 * @return {boolean}310 */​311 function portValidator(item, index, input) {312 var value = input.value.trim();313 var match = value.match(/​^(\d+)$/​);314 if (!match)315 return false;316 var port = parseInt(match[1], 10);317 if (port < 1024 || port > 65535)318 return false;319 for (var i = 0; i < this._portForwardingConfig.length; ++i) {320 if (i !== index && this._portForwardingConfig[i].port === value)321 return false;322 }323 return true;324 }325 /​**326 * @param {*} item327 * @param {number} index328 * @param {!HTMLInputElement|!HTMLSelectElement} input329 * @return {boolean}330 */​331 function addressValidator(item, index, input) {332 var match = input.value.trim().match(/​^([a-zA-Z0-9\.\-_]+):(\d+)$/​);333 if (!match)334 return false;335 var port = parseInt(match[2], 10);336 return port <= 65535;337 }338 }339 _updateDiscoveryConfig() {340 var configMap = /​** @type {!Adb.PortForwardingConfig} */​ ({});341 for (var rule of this._portForwardingConfig)342 configMap[rule.port] = rule.address;343 InspectorFrontendHost.setDevicesDiscoveryConfig(344 this._discoverUsbDevicesCheckbox.checked, this._portForwardingEnabledCheckbox.checked, configMap);345 }346};347/​**348 * @unrestricted349 */​350Devices.DevicesView.DeviceView = class extends UI.VBox {351 constructor() {352 super();353 this.setMinimumSize(100, 100);354 this.contentElement.classList.add('device-view');355 var topRow = this.contentElement.createChild('div', 'hbox device-text-row');356 this._deviceTitle = topRow.createChild('div', 'view-title');357 this._deviceSerial = topRow.createChild('div', 'device-serial');358 this._portStatus = this.contentElement.createChild('div', 'device-port-status hidden');359 this._deviceOffline = this.contentElement.createChild('div');360 this._deviceOffline.textContent =361 Common.UIString('Pending authentication: please accept debugging session on the device.');362 this._noBrowsers = this.contentElement.createChild('div');363 this._noBrowsers.textContent = Common.UIString('No browsers detected.');364 this._browsers = this.contentElement.createChild('div', 'device-browser-list vbox');365 /​** @type {!Map<string, !Devices.DevicesView.BrowserSection>} */​366 this._browserById = new Map();367 this._device = null;368 }369 /​**370 * @param {!Adb.Device} device371 */​372 update(device) {373 if (!this._device || this._device.adbModel !== device.adbModel)374 this._deviceTitle.textContent = device.adbModel;375 if (!this._device || this._device.adbSerial !== device.adbSerial)376 this._deviceSerial.textContent = '#' + device.adbSerial;377 this._deviceOffline.classList.toggle('hidden', device.adbConnected);378 this._noBrowsers.classList.toggle('hidden', !device.adbConnected || !!device.browsers.length);379 this._browsers.classList.toggle('hidden', !device.adbConnected || !device.browsers.length);380 var browserIds = new Set();381 for (var browser of device.browsers)382 browserIds.add(browser.id);383 for (var browserId of this._browserById.keys()) {384 if (!browserIds.has(browserId)) {385 this._browserById.get(browserId).element.remove();386 this._browserById.remove(browserId);387 }388 }389 for (var browser of device.browsers) {390 var section = this._browserById.get(browser.id);391 if (!section) {392 section = this._createBrowserSection();393 this._browserById.set(browser.id, section);394 this._browsers.appendChild(section.element);395 }396 this._updateBrowserSection(section, browser);397 }398 this._device = device;399 }400 /​**401 * @return {!Devices.DevicesView.BrowserSection}402 */​403 _createBrowserSection() {404 var element = createElementWithClass('div', 'vbox flex-none');405 var topRow = element.createChild('div', '');406 var title = topRow.createChild('div', 'device-browser-title');407 var newTabRow = element.createChild('div', 'device-browser-new-tab');408 newTabRow.createChild('div', '').textContent = Common.UIString('New tab:');409 var newTabInput = newTabRow.createChild('input', '');410 newTabInput.type = 'text';411 newTabInput.placeholder = Common.UIString('Enter URL');412 newTabInput.addEventListener('keydown', newTabKeyDown, false);413 var newTabButton = createTextButton(Common.UIString('Open'), openNewTab);414 newTabRow.appendChild(newTabButton);415 var pages = element.createChild('div', 'device-page-list vbox');416 var viewMore = element.createChild('div', 'device-view-more');417 viewMore.addEventListener('click', viewMoreClick, false);418 updateViewMoreTitle();419 var section = {420 browser: null,421 element: element,422 title: title,423 pages: pages,424 viewMore: viewMore,425 newTab: newTabRow,426 pageSections: new Map()427 };428 return section;429 function viewMoreClick() {430 pages.classList.toggle('device-view-more-toggled');431 updateViewMoreTitle();432 }433 function updateViewMoreTitle() {434 viewMore.textContent = pages.classList.contains('device-view-more-toggled') ?435 Common.UIString('View less tabs\u2026') :436 Common.UIString('View more tabs\u2026');437 }438 /​**439 * @param {!Event} event440 */​441 function newTabKeyDown(event) {442 if (event.key === 'Enter') {443 event.consume(true);444 openNewTab();445 }446 }447 function openNewTab() {448 if (section.browser) {449 InspectorFrontendHost.openRemotePage(section.browser.id, newTabInput.value.trim() || 'about:blank');450 newTabInput.value = '';451 }452 }453 }454 /​**455 * @param {!Devices.DevicesView.BrowserSection} section456 * @param {!Adb.Browser} browser457 */​458 _updateBrowserSection(section, browser) {459 if (!section.browser || section.browser.adbBrowserName !== browser.adbBrowserName ||460 section.browser.adbBrowserVersion !== browser.adbBrowserVersion) {461 if (browser.adbBrowserVersion)462 section.title.textContent = String.sprintf('%s (%s)', browser.adbBrowserName, browser.adbBrowserVersion);463 else464 section.title.textContent = browser.adbBrowserName;465 }466 var pageIds = new Set();467 for (var page of browser.pages)468 pageIds.add(page.id);469 for (var pageId of section.pageSections.keys()) {470 if (!pageIds.has(pageId)) {471 section.pageSections.get(pageId).element.remove();472 section.pageSections.remove(pageId);473 }474 }475 for (var index = 0; index < browser.pages.length; ++index) {476 var page = browser.pages[index];477 var pageSection = section.pageSections.get(page.id);478 if (!pageSection) {479 pageSection = this._createPageSection();480 section.pageSections.set(page.id, pageSection);481 section.pages.appendChild(pageSection.element);482 }483 this._updatePageSection(pageSection, page);484 if (!index && section.pages.firstChild !== pageSection.element)485 section.pages.insertBefore(pageSection.element, section.pages.firstChild);486 }487 var kViewMoreCount = 3;488 for (var index = 0, element = section.pages.firstChild; element; element = element.nextSibling, ++index)489 element.classList.toggle('device-view-more-page', index >= kViewMoreCount);490 section.viewMore.classList.toggle('device-needs-view-more', browser.pages.length > kViewMoreCount);491 section.newTab.classList.toggle('hidden', !browser.adbBrowserChromeVersion);492 section.browser = browser;493 }494 /​**495 * @return {!Devices.DevicesView.PageSection}496 */​497 _createPageSection() {498 var element = createElementWithClass('div', 'vbox');499 var titleRow = element.createChild('div', 'device-page-title-row');500 var title = titleRow.createChild('div', 'device-page-title');501 var inspect = createTextButton(Common.UIString('Inspect'), doAction.bind(null, 'inspect'), 'device-inspect-button');502 titleRow.appendChild(inspect);503 var toolbar = new UI.Toolbar('');504 toolbar.appendToolbarItem(new UI.ToolbarMenuButton(appendActions));505 titleRow.appendChild(toolbar.element);506 var url = element.createChild('div', 'device-page-url');507 var section = {page: null, element: element, title: title, url: url, inspect: inspect};508 return section;509 /​**510 * @param {!UI.ContextMenu} contextMenu511 */​512 function appendActions(contextMenu) {513 contextMenu.appendItem(Common.UIString('Reload'), doAction.bind(null, 'reload'));514 contextMenu.appendItem(Common.UIString('Focus'), doAction.bind(null, 'activate'));515 contextMenu.appendItem(Common.UIString('Close'), doAction.bind(null, 'close'));516 }517 /​**518 * @param {string} action519 */​520 function doAction(action) {521 if (section.page)522 InspectorFrontendHost.performActionOnRemotePage(section.page.id, action);523 }524 }525 /​**526 * @param {!Devices.DevicesView.PageSection} section527 * @param {!Adb.Page} page528 */​529 _updatePageSection(section, page) {530 if (!section.page || section.page.name !== page.name) {531 section.title.textContent = page.name;532 section.title.title = page.name;533 }534 if (!section.page || section.page.url !== page.url) {535 section.url.textContent = '';536 section.url.appendChild(UI.createExternalLink(page.url));537 }538 section.inspect.disabled = page.attached;539 section.page = page;540 }541 /​**542 * @param {!Adb.DevicePortForwardingStatus} status543 */​544 portForwardingStatusChanged(status) {545 var json = JSON.stringify(status);546 if (json === this._cachedPortStatus)547 return;548 this._cachedPortStatus = json;549 this._portStatus.removeChildren();550 this._portStatus.createChild('div', 'device-port-status-text').textContent = Common.UIString('Port Forwarding:');551 var connected = [];552 var transient = [];553 var error = [];554 var empty = true;555 for (var port in status.ports) {556 if (!status.ports.hasOwnProperty(port))557 continue;558 empty = false;559 var portStatus = status.ports[port];560 var portNumber = createElementWithClass('div', 'device-view-port-number monospace');561 portNumber.textContent = ':' + port;562 if (portStatus >= 0)563 this._portStatus.appendChild(portNumber);564 else...

Full Screen

Full Screen

ResponsiveDesignView.js

Source:ResponsiveDesignView.js Github

copy

Full Screen

...15 this.element.classList.add("overflow-hidden");16 this._responsiveDesignContainer = new WebInspector.VBox();17 this._createToolbar();18 this._mediaInspector = new WebInspector.MediaQueryInspector();19 this._mediaInspectorContainer = this._responsiveDesignContainer.element.createChild("div");20 this._updateMediaQueryInspector();21 this._canvasContainer = new WebInspector.View();22 this._canvasContainer.element.classList.add("responsive-design");23 this._canvasContainer.show(this._responsiveDesignContainer.element);24 this._canvas = this._canvasContainer.element.createChild("canvas", "fill");25 this._rulerGlasspane = this._canvasContainer.element.createChild("div", "responsive-design-ruler-glasspane");26 this._rulerGlasspane.appendChild(this._mediaInspector.rulerDecorationLayer());27 this._warningMessage = this._canvasContainer.element.createChild("div", "responsive-design-warning hidden");28 this._warningMessage.createChild("div", "warning-icon-small");29 this._warningMessage.createChild("span");30 var warningCloseButton = this._warningMessage.createChild("div", "close-button");31 warningCloseButton.addEventListener("click", WebInspector.overridesSupport.clearWarningMessage.bind(WebInspector.overridesSupport), false);32 WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.OverridesWarningUpdated, this._overridesWarningUpdated, this);33 this._slidersContainer = this._canvasContainer.element.createChild("div", "vbox responsive-design-sliders-container");34 var hbox = this._slidersContainer.createChild("div", "hbox flex-auto");35 this._heightSliderContainer = this._slidersContainer.createChild("div", "hbox responsive-design-slider-height");36 this._pageContainer = hbox.createChild("div", "vbox flex-auto");37 this._widthSliderContainer = hbox.createChild("div", "vbox responsive-design-slider-width");38 this._widthSlider = this._widthSliderContainer.createChild("div", "responsive-design-slider-thumb");39 this._widthSlider.createChild("div", "responsive-design-thumb-handle");40 this._createResizer(this._widthSlider, false);41 this._heightSlider = this._heightSliderContainer.createChild("div", "responsive-design-slider-thumb");42 this._heightSlider.createChild("div", "responsive-design-thumb-handle");43 this._createResizer(this._heightSlider, true);44 this._inspectedPagePlaceholder = inspectedPagePlaceholder;45 inspectedPagePlaceholder.show(this.element);46 this._enabled = false;47 WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);48 WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.EmulationStateChanged, this._emulationEnabledChanged, this);49 this._mediaInspector.addEventListener(WebInspector.MediaQueryInspector.Events.HeightUpdated, this.onResize, this);50 this._emulationEnabledChanged();51 this._overridesWarningUpdated();52};53/​/​ Measured in DIP.54WebInspector.ResponsiveDesignView.SliderWidth = 19;55WebInspector.ResponsiveDesignView.RulerWidth = 22;56WebInspector.ResponsiveDesignView.prototype = {57 _invalidateCache: function()58 {59 delete this._cachedScale;60 delete this._cachedCssCanvasWidth;61 delete this._cachedCssCanvasHeight;62 delete this._cachedCssHeight;63 delete this._cachedCssWidth;64 delete this._cachedZoomFactor;65 delete this._availableSize;66 },67 _emulationEnabledChanged: function()68 {69 var enabled = WebInspector.overridesSupport.emulationEnabled();70 this._mediaInspector.setEnabled(enabled);71 if (enabled && !this._enabled) {72 this._invalidateCache();73 this._ignoreResize = true;74 this._enabled = true;75 this._inspectedPagePlaceholder.clearMinimumSizeAndMargins();76 this._inspectedPagePlaceholder.show(this._pageContainer);77 this._responsiveDesignContainer.show(this.element);78 delete this._ignoreResize;79 this.onResize();80 } else if (!enabled && this._enabled) {81 this._invalidateCache();82 this._ignoreResize = true;83 this._enabled = false;84 this._scale = 1;85 this._inspectedPagePlaceholder.restoreMinimumSizeAndMargins();86 this._responsiveDesignContainer.detach();87 this._inspectedPagePlaceholder.show(this.element);88 delete this._ignoreResize;89 this.onResize();90 }91 },92 /​**93 * WebInspector.OverridesSupport.PageResizer override.94 * @param {number} dipWidth95 * @param {number} dipHeight96 * @param {number} scale97 */​98 update: function(dipWidth, dipHeight, scale)99 {100 this._scale = scale;101 this._dipWidth = dipWidth;102 this._dipHeight = dipHeight;103 this._updateUI();104 },105 updatePageResizer: function()106 {107 WebInspector.overridesSupport.setPageResizer(this, this._availableDipSize());108 },109 /​**110 * @return {!Size}111 */​112 _availableDipSize: function()113 {114 if (typeof this._availableSize === "undefined") {115 var zoomFactor = WebInspector.zoomManager.zoomFactor();116 var rect = this._canvasContainer.element.getBoundingClientRect();117 this._availableSize = new Size(rect.width * zoomFactor - WebInspector.ResponsiveDesignView.RulerWidth,118 rect.height * zoomFactor - WebInspector.ResponsiveDesignView.RulerWidth);119 }120 return this._availableSize;121 },122 /​**123 * @param {!Element} element124 * @param {boolean} vertical125 * @return {!WebInspector.ResizerWidget}126 */​127 _createResizer: function(element, vertical)128 {129 var resizer = new WebInspector.ResizerWidget();130 resizer.addElement(element);131 resizer.setVertical(vertical);132 resizer.addEventListener(WebInspector.ResizerWidget.Events.ResizeStart, this._onResizeStart, this);133 resizer.addEventListener(WebInspector.ResizerWidget.Events.ResizeUpdate, this._onResizeUpdate, this);134 resizer.addEventListener(WebInspector.ResizerWidget.Events.ResizeEnd, this._onResizeEnd, this);135 return resizer;136 },137 /​**138 * @param {!WebInspector.Event} event139 */​140 _onResizeStart: function(event)141 {142 var available = this._availableDipSize();143 this._slowPositionStart = null;144 this._resizeStartSize = event.target.isVertical() ? (this._dipHeight || available.height) : (this._dipWidth || available.width);145 },146 /​**147 * @param {!WebInspector.Event} event148 */​149 _onResizeUpdate: function(event)150 {151 if (event.data.shiftKey !== !!this._slowPositionStart)152 this._slowPositionStart = event.data.shiftKey ? event.data.currentPosition : null;153 var cssOffset = this._slowPositionStart ? (event.data.currentPosition - this._slowPositionStart) /​ 10 + this._slowPositionStart - event.data.startPosition : event.data.currentPosition - event.data.startPosition;154 var dipOffset = Math.round(cssOffset * WebInspector.zoomManager.zoomFactor());155 var newSize = Math.max(this._resizeStartSize + dipOffset, 1);156 var requested = {};157 if (event.target.isVertical())158 requested.height = newSize;159 else160 requested.width = newSize;161 this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.ResizeRequested, requested);162 },163 /​**164 * @param {!WebInspector.Event} event165 */​166 _onResizeEnd: function(event)167 {168 delete this._resizeStartSize;169 },170 /​**171 * Draws canvas of the specified css size in DevTools page space.172 * Canvas contains grid and rulers.173 * @param {number} cssCanvasWidth174 * @param {number} cssCanvasHeight175 */​176 _drawCanvas: function(cssCanvasWidth, cssCanvasHeight)177 {178 if (!this._enabled)179 return;180 var canvas = this._canvas;181 var context = canvas.getContext("2d");182 canvas.style.width = cssCanvasWidth + "px";183 canvas.style.height = cssCanvasHeight + "px";184 var zoomFactor = WebInspector.zoomManager.zoomFactor();185 var dipCanvasWidth = cssCanvasWidth * zoomFactor;186 var dipCanvasHeight = cssCanvasHeight * zoomFactor;187 var deviceScaleFactor = window.devicePixelRatio;188 canvas.width = deviceScaleFactor * cssCanvasWidth;189 canvas.height = deviceScaleFactor * cssCanvasHeight;190 context.scale(canvas.width /​ dipCanvasWidth, canvas.height /​ dipCanvasHeight);191 context.font = "11px " + WebInspector.fontFamily();192 const rulerStep = 100;193 const rulerSubStep = 5;194 const gridStep = 50;195 const gridSubStep = 10;196 const rulerBackgroundColor = "rgb(0, 0, 0)";197 const backgroundColor = "rgb(102, 102, 102)";198 const lightLineColor = "rgb(132, 132, 132)";199 const darkLineColor = "rgb(114, 114, 114)";200 const rulerColor = "rgb(125, 125, 125)";201 const textColor = "rgb(186, 186, 186)";202 var scale = this._scale || 1;203 var rulerWidth = WebInspector.ResponsiveDesignView.RulerWidth;204 var dipGridWidth = dipCanvasWidth /​ scale - rulerWidth;205 var dipGridHeight = dipCanvasHeight /​ scale - rulerWidth;206 rulerWidth /​= scale;207 context.scale(scale, scale);208 context.translate(rulerWidth, rulerWidth);209 context.fillStyle = rulerBackgroundColor;210 context.fillRect(-rulerWidth, -rulerWidth, dipGridWidth + rulerWidth, rulerWidth);211 context.fillRect(-rulerWidth, 0, rulerWidth, dipGridHeight);212 context.fillStyle = backgroundColor;213 context.fillRect(0, 0, dipGridWidth, dipGridHeight);214 context.translate(0.5, 0.5);215 context.strokeStyle = rulerColor;216 context.fillStyle = textColor;217 context.lineWidth = 1;218 /​/​ Draw vertical ruler.219 for (var x = 0; x < dipGridWidth; x += rulerSubStep) {220 var y = -rulerWidth /​ 4;221 if (!(x % (rulerStep /​ 4)))222 y = -rulerWidth /​ 2;223 if (!(x % (rulerStep /​ 2)))224 y = -rulerWidth + 2;225 if (!(x % rulerStep)) {226 context.save();227 context.translate(x, 0);228 context.fillText(x, 2, -rulerWidth /​ 2);229 context.restore();230 y = -rulerWidth;231 }232 context.beginPath();233 context.moveTo(x, y);234 context.lineTo(x, 0);235 context.stroke();236 }237 /​/​ Draw horizontal ruler.238 for (var y = 0; y < dipGridHeight; y += rulerSubStep) {239 x = -rulerWidth /​ 4;240 if (!(y % (rulerStep /​ 4)))241 x = -rulerWidth /​ 2;242 if (!(y % (rulerStep /​ 2)))243 x = -rulerWidth + 2;244 if (!(y % rulerStep)) {245 context.save();246 context.translate(0, y);247 context.rotate(-Math.PI /​ 2);248 context.fillText(y, 2, -rulerWidth /​ 2);249 context.restore();250 x = -rulerWidth;251 }252 context.beginPath();253 context.moveTo(x, y);254 context.lineTo(0, y);255 context.stroke();256 }257 /​/​ Draw grid.258 drawGrid(darkLineColor, gridSubStep);259 drawGrid(lightLineColor, gridStep);260 /​**261 * @param {string} color262 * @param {number} step263 */​264 function drawGrid(color, step)265 {266 context.strokeStyle = color;267 for (var x = 0; x < dipGridWidth; x += step) {268 context.beginPath();269 context.moveTo(x, 0);270 context.lineTo(x, dipGridHeight);271 context.stroke();272 }273 for (var y = 0; y < dipGridHeight; y += step) {274 context.beginPath();275 context.moveTo(0, y);276 context.lineTo(dipGridWidth, y);277 context.stroke();278 }279 }280 },281 _updateUI: function()282 {283 if (!this._enabled || !this.isShowing())284 return;285 var zoomFactor = WebInspector.zoomManager.zoomFactor();286 var rect = this._canvas.parentElement.getBoundingClientRect();287 var availableDip = this._availableDipSize();288 var cssCanvasWidth = rect.width;289 var cssCanvasHeight = rect.height;290 this._widthSlider.classList.toggle("hidden", !!this._scale);291 this._heightSlider.classList.toggle("hidden", !!this._scale);292 this._widthSlider.classList.toggle("reversed", !this._dipWidth);293 this._heightSlider.classList.toggle("reversed", !this._dipHeight);294 if (this._cachedZoomFactor !== zoomFactor) {295 var cssRulerWidth = WebInspector.ResponsiveDesignView.RulerWidth /​ zoomFactor + "px";296 this._rulerGlasspane.style.height = cssRulerWidth;297 this._rulerGlasspane.style.left = cssRulerWidth;298 this._slidersContainer.style.left = cssRulerWidth;299 this._mediaInspector.translateZero(WebInspector.ResponsiveDesignView.RulerWidth /​ zoomFactor);300 this._slidersContainer.style.top = cssRulerWidth;301 this._warningMessage.style.height = cssRulerWidth;302 var cssSliderWidth = WebInspector.ResponsiveDesignView.SliderWidth /​ zoomFactor + "px";303 this._heightSliderContainer.style.flexBasis = cssSliderWidth;304 this._heightSliderContainer.style.marginBottom = "-" + cssSliderWidth;305 this._widthSliderContainer.style.flexBasis = cssSliderWidth;306 this._widthSliderContainer.style.marginRight = "-" + cssSliderWidth;307 }308 var cssWidth = this._dipWidth ? (this._dipWidth /​ zoomFactor + "px") : (availableDip.width /​ zoomFactor + "px");309 var cssHeight = this._dipHeight ? (this._dipHeight /​ zoomFactor + "px") : (availableDip.height /​ zoomFactor + "px");310 if (this._cachedCssWidth !== cssWidth || this._cachedCssHeight !== cssHeight) {311 this._slidersContainer.style.width = cssWidth;312 this._slidersContainer.style.height = cssHeight;313 this._inspectedPagePlaceholder.onResize();314 }315 if (this._cachedScale !== this._scale || this._cachedCssCanvasWidth !== cssCanvasWidth || this._cachedCssCanvasHeight !== cssCanvasHeight || this._cachedZoomFactor !== zoomFactor)316 this._drawCanvas(cssCanvasWidth, cssCanvasHeight);317 this._cachedScale = this._scale;318 this._cachedCssCanvasWidth = cssCanvasWidth;319 this._cachedCssCanvasHeight = cssCanvasHeight;320 this._cachedCssHeight = cssHeight;321 this._cachedCssWidth = cssWidth;322 this._cachedZoomFactor = zoomFactor;323 },324 onResize: function()325 {326 if (!this._enabled || this._ignoreResize)327 return;328 var oldSize = this._availableSize;329 delete this._availableSize;330 var newSize = this._availableDipSize();331 if (!newSize.isEqual(oldSize))332 this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.AvailableSizeChanged, newSize);333 this._updateUI();334 this._inspectedPagePlaceholder.onResize();335 },336 _onZoomChanged: function()337 {338 this._updateUI();339 },340 _createToolbar: function()341 {342 this._toolbarElement = this._responsiveDesignContainer.element.createChild("div", "responsive-design-toolbar");343 this._createButtonsSection();344 this._toolbarElement.createChild("div", "responsive-design-separator");345 this._createDeviceSection();346 if (WebInspector.experimentsSettings.networkConditions.isEnabled()) {347 this._toolbarElement.createChild("div", "responsive-design-separator");348 this._createNetworkSection();349 }350 this._toolbarElement.createChild("div", "responsive-design-separator");351 var moreButtonContainer = this._toolbarElement.createChild("div", "responsive-design-more-button-container");352 var moreButton = moreButtonContainer.createChild("button", "responsive-design-more-button");353 moreButton.title = WebInspector.UIString("More overrides");354 moreButton.addEventListener("click", this._showEmulationInDrawer.bind(this), false);355 moreButton.textContent = "\u2026";356 },357 _createButtonsSection: function()358 {359 var buttonsSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-buttons");360 var resetButton = new WebInspector.StatusBarButton(WebInspector.UIString("Reset all overrides."), "clear-status-bar-item");361 buttonsSection.appendChild(resetButton.element);362 resetButton.addEventListener("click", WebInspector.overridesSupport.reset, WebInspector.overridesSupport);363 /​/​ Media Query Inspector.364 this._toggleMediaInspectorButton = new WebInspector.StatusBarButton(WebInspector.UIString("Media queries."), "responsive-design-toggle-media-inspector");365 this._toggleMediaInspectorButton.toggled = WebInspector.settings.showMediaQueryInspector.get();366 this._toggleMediaInspectorButton.addEventListener("click", this._onToggleMediaInspectorButtonClick, this);367 WebInspector.settings.showMediaQueryInspector.addChangeListener(this._updateMediaQueryInspector, this);368 buttonsSection.appendChild(this._toggleMediaInspectorButton.element);369 },370 _createDeviceSection: function()371 {372 var deviceSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-device");373 /​/​ Device.374 var deviceElement = deviceSection.createChild("div", "responsive-design-suite responsive-design-suite-top").createChild("div");375 var fieldsetElement = deviceElement.createChild("fieldset");376 fieldsetElement.createChild("label").textContent = WebInspector.UIString("Device");377 fieldsetElement.appendChild(WebInspector.overridesSupport.createDeviceSelect(document));378 var separator = deviceSection.createChild("div", "responsive-design-section-separator");379 var detailsElement = deviceSection.createChild("div", "responsive-design-suite");380 /​/​ Dimensions.381 var screenElement = detailsElement.createChild("div", "");382 fieldsetElement = screenElement.createChild("fieldset");383 var resolutionButton = new WebInspector.StatusBarButton(WebInspector.UIString("Screen resolution"), "responsive-design-icon responsive-design-icon-resolution");384 resolutionButton.setEnabled(false);385 fieldsetElement.appendChild(resolutionButton.element);386 fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceWidth, true, 4, "3em", WebInspector.OverridesSupport.deviceSizeValidator, true, true, WebInspector.UIString("\u2013")));387 fieldsetElement.appendChild(document.createTextNode(" \u00D7 "));388 fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceHeight, true, 4, "3em", WebInspector.OverridesSupport.deviceSizeValidator, true, true, WebInspector.UIString("\u2013")));389 var swapButton = new WebInspector.StatusBarButton(WebInspector.UIString("Swap dimensions"), "responsive-design-icon responsive-design-icon-swap");390 swapButton.element.tabIndex = -1;391 swapButton.addEventListener("click", WebInspector.overridesSupport.swapDimensions, WebInspector.overridesSupport);392 fieldsetElement.appendChild(swapButton.element);393 /​/​ Device pixel ratio.394 detailsElement.createChild("div", "responsive-design-suite-separator");395 var dprElement = detailsElement.createChild("div", "");396 fieldsetElement = dprElement.createChild("fieldset");397 var dprButton = new WebInspector.StatusBarButton(WebInspector.UIString("Device pixel ratio"), "responsive-design-icon responsive-design-icon-dpr");398 dprButton.setEnabled(false);399 fieldsetElement.appendChild(dprButton.element);400 fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 4, "2.5em", WebInspector.OverridesSupport.deviceScaleFactorValidator, true, true, WebInspector.UIString("\u2013")));401 },402 _createNetworkSection: function()403 {404 var networkSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-network");405 /​/​ Bandwidth.406 var bandwidthElement = networkSection.createChild("div", "responsive-design-suite responsive-design-suite-top").createChild("div");407 var fieldsetElement = bandwidthElement.createChild("fieldset");408 var networkCheckbox = fieldsetElement.createChild("label");409 networkCheckbox.textContent = WebInspector.UIString("Network");410 fieldsetElement.appendChild(WebInspector.overridesSupport.createNetworkThroughputSelect(document));411 var separator = networkSection.createChild("div", "responsive-design-section-separator");412 /​/​ User agent.413 var userAgentElement = networkSection.createChild("div", "responsive-design-suite").createChild("div");414 fieldsetElement = userAgentElement.createChild("fieldset");415 fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("UA", WebInspector.overridesSupport.settings.userAgent, false, 0, "", undefined, false, false, WebInspector.UIString("No override")));416 },417 _onToggleMediaInspectorButtonClick: function()418 {419 WebInspector.settings.showMediaQueryInspector.set(!this._toggleMediaInspectorButton.toggled);420 },421 _updateMediaQueryInspector: function()422 {423 this._toggleMediaInspectorButton.toggled = WebInspector.settings.showMediaQueryInspector.get();424 if (this._mediaInspector.isShowing() === WebInspector.settings.showMediaQueryInspector.get())425 return;426 if (this._mediaInspector.isShowing())427 this._mediaInspector.detach();428 else...

Full Screen

Full Screen

SensorsView.js

Source:SensorsView.js Github

copy

Full Screen

...12 this._geolocationSetting = Common.settings.createSetting('emulation.geolocationOverride', '');13 this._geolocation = Emulation.Geolocation.parseSetting(this._geolocationSetting.get());14 this._geolocationOverrideEnabled = false;15 this._createGeolocationSection(this._geolocation);16 this.contentElement.createChild('div').classList.add('panel-section-separator');17 this._deviceOrientationSetting = Common.settings.createSetting('emulation.deviceOrientationOverride', '');18 this._deviceOrientation = Emulation.DeviceOrientation.parseSetting(this._deviceOrientationSetting.get());19 this._deviceOrientationOverrideEnabled = false;20 this._createDeviceOrientationSection();21 this.contentElement.createChild('div').classList.add('panel-section-separator');22 this._appendTouchControl();23 }24 /​**25 * @return {!Emulation.SensorsView}26 */​27 static instance() {28 if (!Emulation.SensorsView._instanceObject)29 Emulation.SensorsView._instanceObject = new Emulation.SensorsView();30 return Emulation.SensorsView._instanceObject;31 }32 /​**33 * @param {!Emulation.Geolocation} geolocation34 */​35 _createGeolocationSection(geolocation) {36 var geogroup = this.contentElement.createChild('section', 'sensors-group');37 geogroup.createChild('div', 'sensors-group-title').textContent = Common.UIString('Geolocation');38 var fields = geogroup.createChild('div', 'geo-fields');39 const noOverrideOption = {40 title: Common.UIString('No override'),41 location: Emulation.SensorsView.NonPresetOptions.NoOverride42 };43 const customLocationOption = {44 title: Common.UIString('Custom location...'),45 location: Emulation.SensorsView.NonPresetOptions.Custom46 };47 this._locationSelectElement = this.contentElement.createChild('select', 'chrome-select');48 this._locationSelectElement.appendChild(new Option(noOverrideOption.title, noOverrideOption.location));49 this._locationSelectElement.appendChild(new Option(customLocationOption.title, customLocationOption.location));50 var locationGroups = Emulation.SensorsView.PresetLocations;51 for (var i = 0; i < locationGroups.length; ++i) {52 var group = locationGroups[i].value;53 var groupElement = this._locationSelectElement.createChild('optgroup');54 groupElement.label = locationGroups[i].title;55 for (var j = 0; j < group.length; ++j)56 groupElement.appendChild(new Option(group[j].title, group[j].location));57 }58 this._locationSelectElement.selectedIndex = 0;59 fields.appendChild(this._locationSelectElement);60 this._locationSelectElement.addEventListener('change', this._geolocationSelectChanged.bind(this));61 /​/​ Validated input fieldset.62 this._fieldsetElement = fields.createChild('fieldset');63 this._fieldsetElement.disabled = !this._geolocationOverrideEnabled;64 this._fieldsetElement.id = 'geolocation-override-section';65 var latitudeGroup = this._fieldsetElement.createChild('div', 'latlong-group');66 var longitudeGroup = this._fieldsetElement.createChild('div', 'latlong-group');67 this._latitudeInput = latitudeGroup.createChild('input');68 this._latitudeInput.setAttribute('type', 'number');69 this._latitudeInput.value = 0;70 this._latitudeSetter = UI.bindInput(71 this._latitudeInput, this._applyGeolocationUserInput.bind(this), Emulation.Geolocation.latitudeValidator, true);72 this._latitudeSetter(String(geolocation.latitude));73 this._longitudeInput = longitudeGroup.createChild('input');74 this._longitudeInput.setAttribute('type', 'number');75 this._longitudeInput.value = 0;76 this._longitudeSetter = UI.bindInput(77 this._longitudeInput, this._applyGeolocationUserInput.bind(this), Emulation.Geolocation.longitudeValidator,78 true);79 this._longitudeSetter(String(geolocation.longitude));80 latitudeGroup.createChild('div', 'latlong-title').textContent = Common.UIString('Latitude');81 longitudeGroup.createChild('div', 'latlong-title').textContent = Common.UIString('Longitude');82 }83 _geolocationSelectChanged() {84 this._fieldsetElement.disabled = false;85 var value = this._locationSelectElement.options[this._locationSelectElement.selectedIndex].value;86 if (value === Emulation.SensorsView.NonPresetOptions.NoOverride) {87 this._geolocationOverrideEnabled = false;88 this._fieldsetElement.disabled = true;89 } else if (value === Emulation.SensorsView.NonPresetOptions.Custom) {90 this._geolocationOverrideEnabled = true;91 } else if (value === Emulation.SensorsView.NonPresetOptions.Unavailable) {92 this._geolocationOverrideEnabled = true;93 this._geolocation = new Emulation.Geolocation(0, 0, true);94 } else {95 this._geolocationOverrideEnabled = true;96 var coordinates = JSON.parse(value);97 this._geolocation = new Emulation.Geolocation(coordinates[0], coordinates[1], false);98 this._latitudeSetter(coordinates[0]);99 this._longitudeSetter(coordinates[1]);100 }101 this._applyGeolocation();102 if (value === Emulation.SensorsView.NonPresetOptions.Custom)103 this._latitudeInput.focus();104 }105 _applyGeolocationUserInput() {106 var geolocation =107 Emulation.Geolocation.parseUserInput(this._latitudeInput.value.trim(), this._longitudeInput.value.trim(), '');108 if (!geolocation)109 return;110 this._setSelectElementLabel(this._locationSelectElement, Emulation.SensorsView.NonPresetOptions.Custom);111 this._geolocation = geolocation;112 this._applyGeolocation();113 }114 _applyGeolocation() {115 if (this._geolocationOverrideEnabled) {116 this._geolocationSetting.set(this._geolocation.toSetting());117 this._geolocation.apply();118 } else {119 this._geolocation.clear();120 }121 }122 _createDeviceOrientationSection() {123 var orientationGroup = this.contentElement.createChild('section', 'sensors-group');124 orientationGroup.createChild('div', 'sensors-group-title').textContent = Common.UIString('Orientation');125 var orientationContent = orientationGroup.createChild('div', 'orientation-content');126 var fields = orientationContent.createChild('div', 'orientation-fields');127 const orientationOffOption = {128 title: Common.UIString('Off'),129 orientation: Emulation.SensorsView.NonPresetOptions.NoOverride130 };131 const customOrientationOption = {132 title: Common.UIString('Custom orientation...'),133 orientation: Emulation.SensorsView.NonPresetOptions.Custom134 };135 this._orientationSelectElement = this.contentElement.createChild('select', 'chrome-select');136 this._orientationSelectElement.appendChild(137 new Option(orientationOffOption.title, orientationOffOption.orientation));138 this._orientationSelectElement.appendChild(139 new Option(customOrientationOption.title, customOrientationOption.orientation));140 var orientationGroups = Emulation.SensorsView.PresetOrientations;141 for (var i = 0; i < orientationGroups.length; ++i) {142 var groupElement = this._orientationSelectElement.createChild('optgroup');143 groupElement.label = orientationGroups[i].title;144 var group = orientationGroups[i].value;145 for (var j = 0; j < group.length; ++j)146 groupElement.appendChild(new Option(group[j].title, group[j].orientation));147 }148 this._orientationSelectElement.selectedIndex = 0;149 fields.appendChild(this._orientationSelectElement);150 this._orientationSelectElement.addEventListener('change', this._orientationSelectChanged.bind(this));151 this._deviceOrientationFieldset = this._createDeviceOrientationOverrideElement(this._deviceOrientation);152 this._stageElement = orientationContent.createChild('div', 'orientation-stage');153 this._stageElement.title = Common.UIString('Shift+drag horizontally to rotate around the y-axis');154 this._orientationLayer = this._stageElement.createChild('div', 'orientation-layer');155 this._boxElement = this._orientationLayer.createChild('section', 'orientation-box orientation-element');156 this._boxElement.createChild('section', 'orientation-front orientation-element');157 this._boxElement.createChild('section', 'orientation-top orientation-element');158 this._boxElement.createChild('section', 'orientation-back orientation-element');159 this._boxElement.createChild('section', 'orientation-left orientation-element');160 this._boxElement.createChild('section', 'orientation-right orientation-element');161 this._boxElement.createChild('section', 'orientation-bottom orientation-element');162 UI.installDragHandle(163 this._stageElement, this._onBoxDragStart.bind(this), this._onBoxDrag.bind(this), null, '-webkit-grabbing',164 '-webkit-grab');165 fields.appendChild(this._deviceOrientationFieldset);166 this._enableOrientationFields(true);167 this._setBoxOrientation(this._deviceOrientation, false);168 }169 /​**170 * @param {?boolean} disable171 */​172 _enableOrientationFields(disable) {173 if (disable) {174 this._deviceOrientationFieldset.disabled = true;175 this._stageElement.classList.add('disabled');176 } else {177 this._deviceOrientationFieldset.disabled = false;178 this._stageElement.classList.remove('disabled');179 }180 }181 _orientationSelectChanged() {182 var value = this._orientationSelectElement.options[this._orientationSelectElement.selectedIndex].value;183 this._enableOrientationFields(false);184 if (value === Emulation.SensorsView.NonPresetOptions.NoOverride) {185 this._deviceOrientationOverrideEnabled = false;186 this._enableOrientationFields(true);187 } else if (value === Emulation.SensorsView.NonPresetOptions.Custom) {188 this._deviceOrientationOverrideEnabled = true;189 this._alphaElement.focus();190 } else {191 var parsedValue = JSON.parse(value);192 this._deviceOrientationOverrideEnabled = true;193 this._deviceOrientation = new Emulation.DeviceOrientation(parsedValue[0], parsedValue[1], parsedValue[2]);194 this._setDeviceOrientation(195 this._deviceOrientation, Emulation.SensorsView.DeviceOrientationModificationSource.SelectPreset);196 }197 }198 _applyDeviceOrientation() {199 if (this._deviceOrientationOverrideEnabled) {200 this._deviceOrientationSetting.set(this._deviceOrientation.toSetting());201 this._deviceOrientation.apply();202 } else {203 this._deviceOrientation.clear();204 }205 }206 /​**207 * @param {!Element} selectElement208 * @param {string} labelValue209 */​210 _setSelectElementLabel(selectElement, labelValue) {211 var optionValues = Array.prototype.map.call(selectElement.options, x => x.value);212 selectElement.selectedIndex = optionValues.indexOf(labelValue);213 }214 _applyDeviceOrientationUserInput() {215 this._setDeviceOrientation(216 Emulation.DeviceOrientation.parseUserInput(217 this._alphaElement.value.trim(), this._betaElement.value.trim(), this._gammaElement.value.trim()),218 Emulation.SensorsView.DeviceOrientationModificationSource.UserInput);219 this._setSelectElementLabel(this._orientationSelectElement, Emulation.SensorsView.NonPresetOptions.Custom);220 }221 _resetDeviceOrientation() {222 this._setDeviceOrientation(223 new Emulation.DeviceOrientation(0, 90, 0),224 Emulation.SensorsView.DeviceOrientationModificationSource.ResetButton);225 this._setSelectElementLabel(this._orientationSelectElement, '[0, 90, 0]');226 }227 /​**228 * @param {?Emulation.DeviceOrientation} deviceOrientation229 * @param {!Emulation.SensorsView.DeviceOrientationModificationSource} modificationSource230 */​231 _setDeviceOrientation(deviceOrientation, modificationSource) {232 if (!deviceOrientation)233 return;234 /​**235 * @param {number} angle236 * @return {number}237 */​238 function roundAngle(angle) {239 return Math.round(angle * 10000) /​ 10000;240 }241 if (modificationSource !== Emulation.SensorsView.DeviceOrientationModificationSource.UserInput) {242 this._alphaSetter(roundAngle(deviceOrientation.alpha));243 this._betaSetter(roundAngle(deviceOrientation.beta));244 this._gammaSetter(roundAngle(deviceOrientation.gamma));245 }246 var animate = modificationSource !== Emulation.SensorsView.DeviceOrientationModificationSource.UserDrag;247 this._setBoxOrientation(deviceOrientation, animate);248 this._deviceOrientation = deviceOrientation;249 this._applyDeviceOrientation();250 }251 /​**252 * @param {!Element} parentElement253 * @param {!Element} input254 * @param {string} label255 * @return {function(string)}256 */​257 _createAxisInput(parentElement, input, label) {258 var div = parentElement.createChild('div', 'orientation-axis-input-container');259 div.appendChild(input);260 div.createTextChild(label);261 input.type = 'number';262 return UI.bindInput(263 input, this._applyDeviceOrientationUserInput.bind(this), Emulation.DeviceOrientation.validator, true);264 }265 /​**266 * @param {!Emulation.DeviceOrientation} deviceOrientation267 * @return {!Element}268 */​269 _createDeviceOrientationOverrideElement(deviceOrientation) {270 var fieldsetElement = createElement('fieldset');271 fieldsetElement.classList.add('device-orientation-override-section');272 var cellElement = fieldsetElement.createChild('td', 'orientation-inputs-cell');273 this._alphaElement = createElement('input');274 this._alphaSetter = this._createAxisInput(cellElement, this._alphaElement, Common.UIString('\u03B1 (alpha)'));275 this._alphaSetter(String(deviceOrientation.alpha));276 this._betaElement = createElement('input');277 this._betaSetter = this._createAxisInput(cellElement, this._betaElement, Common.UIString('\u03B2 (beta)'));278 this._betaSetter(String(deviceOrientation.beta));279 this._gammaElement = createElement('input');280 this._gammaSetter = this._createAxisInput(cellElement, this._gammaElement, Common.UIString('\u03B3 (gamma)'));281 this._gammaSetter(String(deviceOrientation.gamma));282 cellElement.appendChild(createTextButton(283 Common.UIString('Reset'), this._resetDeviceOrientation.bind(this), 'orientation-reset-button'));284 return fieldsetElement;285 }286 /​**287 * @param {!Emulation.DeviceOrientation} deviceOrientation288 * @param {boolean} animate289 */​290 _setBoxOrientation(deviceOrientation, animate) {291 if (animate)292 this._stageElement.classList.add('is-animating');293 else294 this._stageElement.classList.remove('is-animating');295 /​/​ The CSS transform should not depend on matrix3d, which does not interpolate well.296 var matrix = new WebKitCSSMatrix();297 this._boxMatrix = matrix.rotate(-deviceOrientation.beta, deviceOrientation.gamma, -deviceOrientation.alpha);298 var eulerAngles =299 new Common.Geometry.EulerAngles(deviceOrientation.alpha, deviceOrientation.beta, deviceOrientation.gamma);300 this._orientationLayer.style.transform = eulerAngles.toRotate3DString();301 }302 /​**303 * @param {!MouseEvent} event304 * @return {boolean}305 */​306 _onBoxDrag(event) {307 var mouseMoveVector = this._calculateRadiusVector(event.x, event.y);308 if (!mouseMoveVector)309 return true;310 event.consume(true);311 var axis, angle;312 if (event.shiftKey) {313 axis = new Common.Geometry.Vector(0, 0, -1);314 angle = (this._mouseDownVector.x - mouseMoveVector.x) * Emulation.SensorsView.ShiftDragOrientationSpeed;315 } else {316 axis = Common.Geometry.crossProduct(this._mouseDownVector, mouseMoveVector);317 angle = Common.Geometry.calculateAngle(this._mouseDownVector, mouseMoveVector);318 }319 /​/​ The mouse movement vectors occur in the screen space, which is offset by 90 degrees from320 /​/​ the actual device orientation.321 var currentMatrix = new WebKitCSSMatrix();322 currentMatrix = currentMatrix.rotate(-90, 0, 0)323 .rotateAxisAngle(axis.x, axis.y, axis.z, angle)324 .rotate(90, 0, 0)325 .multiply(this._originalBoxMatrix);326 var eulerAngles = Common.Geometry.EulerAngles.fromRotationMatrix(currentMatrix);327 var newOrientation = new Emulation.DeviceOrientation(-eulerAngles.alpha, -eulerAngles.beta, eulerAngles.gamma);328 this._setDeviceOrientation(newOrientation, Emulation.SensorsView.DeviceOrientationModificationSource.UserDrag);329 this._setSelectElementLabel(this._orientationSelectElement, Emulation.SensorsView.NonPresetOptions.Custom);330 return false;331 }332 /​**333 * @param {!MouseEvent} event334 * @return {boolean}335 */​336 _onBoxDragStart(event) {337 if (!this._deviceOrientationOverrideEnabled)338 return false;339 this._mouseDownVector = this._calculateRadiusVector(event.x, event.y);340 this._originalBoxMatrix = this._boxMatrix;341 if (!this._mouseDownVector)342 return false;343 event.consume(true);344 return true;345 }346 /​**347 * @param {number} x348 * @param {number} y349 * @return {?Common.Geometry.Vector}350 */​351 _calculateRadiusVector(x, y) {352 var rect = this._stageElement.getBoundingClientRect();353 var radius = Math.max(rect.width, rect.height) /​ 2;354 var sphereX = (x - rect.left - rect.width /​ 2) /​ radius;355 var sphereY = (y - rect.top - rect.height /​ 2) /​ radius;356 var sqrSum = sphereX * sphereX + sphereY * sphereY;357 if (sqrSum > 0.5)358 return new Common.Geometry.Vector(sphereX, sphereY, 0.5 /​ Math.sqrt(sqrSum));359 return new Common.Geometry.Vector(sphereX, sphereY, Math.sqrt(1 - sqrSum));360 }361 _appendTouchControl() {362 var groupElement = this.contentElement.createChild('div', 'sensors-group');363 var title = groupElement.createChild('div', 'sensors-group-title');364 var fieldsElement = groupElement.createChild('div', 'sensors-group-fields');365 title.textContent = Common.UIString('Touch');366 var select = fieldsElement.createChild('select', 'chrome-select');367 select.appendChild(new Option(Common.UIString('Device-based'), 'auto'));368 select.appendChild(new Option(Common.UIString('Force enabled'), 'enabled'));369 select.addEventListener('change', applyTouch, false);370 function applyTouch() {371 Emulation.MultitargetTouchModel.instance().setCustomTouchEnabled(select.value === 'enabled');372 }373 }374};375/​** @enum {string} */​376Emulation.SensorsView.DeviceOrientationModificationSource = {377 UserInput: 'userInput',378 UserDrag: 'userDrag',379 ResetButton: 'resetButton',380 SelectPreset: 'selectPreset'...

Full Screen

Full Screen

RequestTimingView.js

Source:RequestTimingView.js Github

copy

Full Screen

...166 * @return {!Element}167 */​168 static createTimingTable(request, navigationStart) {169 var tableElement = createElementWithClass('table', 'network-timing-table');170 var colgroup = tableElement.createChild('colgroup');171 colgroup.createChild('col', 'labels');172 colgroup.createChild('col', 'bars');173 colgroup.createChild('col', 'duration');174 var timeRanges = Network.RequestTimingView.calculateRequestTimeRanges(request, navigationStart);175 var startTime = timeRanges.map(r => r.start).reduce((a, b) => Math.min(a, b));176 var endTime = timeRanges.map(r => r.end).reduce((a, b) => Math.max(a, b));177 var scale = 100 /​ (endTime - startTime);178 var connectionHeader;179 var dataHeader;180 var totalDuration = 0;181 for (var i = 0; i < timeRanges.length; ++i) {182 var range = timeRanges[i];183 var rangeName = range.name;184 if (rangeName === Network.RequestTimeRangeNames.Total) {185 totalDuration = range.end - range.start;186 continue;187 }188 if (rangeName === Network.RequestTimeRangeNames.Push) {189 createHeader(Common.UIString('Server Push'));190 } else if (Network.RequestTimingView.ConnectionSetupRangeNames.has(rangeName)) {191 if (!connectionHeader)192 connectionHeader = createHeader(Common.UIString('Connection Setup'));193 } else {194 if (!dataHeader)195 dataHeader = createHeader(Common.UIString('Request/​Response'));196 }197 var left = (scale * (range.start - startTime));198 var right = (scale * (endTime - range.end));199 var duration = range.end - range.start;200 var tr = tableElement.createChild('tr');201 tr.createChild('td').createTextChild(Network.RequestTimingView._timeRangeTitle(rangeName));202 var row = tr.createChild('td').createChild('div', 'network-timing-row');203 var bar = row.createChild('span', 'network-timing-bar ' + rangeName);204 bar.style.left = left + '%';205 bar.style.right = right + '%';206 bar.textContent = '\u200B'; /​/​ Important for 0-time items to have 0 width.207 var label = tr.createChild('td').createChild('div', 'network-timing-bar-title');208 label.textContent = Number.secondsToString(duration, true);209 }210 if (!request.finished) {211 var cell = tableElement.createChild('tr').createChild('td', 'caution');212 cell.colSpan = 3;213 cell.createTextChild(Common.UIString('CAUTION: request is not finished yet!'));214 }215 var footer = tableElement.createChild('tr', 'network-timing-footer');216 var note = footer.createChild('td');217 note.colSpan = 2;218 note.appendChild(UI.createDocumentationLink(219 'profile/​network-performance/​resource-loading#view-network-timing-details-for-a-specific-resource',220 Common.UIString('Explanation')));221 footer.createChild('td').createTextChild(Number.secondsToString(totalDuration, true));222 var serverTimings = request.serverTimings;223 if (!serverTimings)224 return tableElement;225 var lastTimingRightEdge = right === undefined ? 100 : right;226 var breakElement = tableElement.createChild('tr', 'network-timing-table-header').createChild('td');227 breakElement.colSpan = 3;228 breakElement.createChild('hr', 'break');229 var serverHeader = tableElement.createChild('tr', 'network-timing-table-header');230 serverHeader.createChild('td').createTextChild(Common.UIString('Server Timing'));231 serverHeader.createChild('td');232 serverHeader.createChild('td').createTextChild(Common.UIString('TIME'));233 serverTimings.filter(item => item.metric.toLowerCase() !== 'total')234 .forEach(item => addTiming(item, lastTimingRightEdge));235 serverTimings.filter(item => item.metric.toLowerCase() === 'total')236 .forEach(item => addTiming(item, lastTimingRightEdge));237 return tableElement;238 /​**239 * @param {!SDK.ServerTiming} serverTiming240 * @param {number} right241 */​242 function addTiming(serverTiming, right) {243 var colorGenerator = new UI.FlameChart.ColorGenerator({min: 0, max: 360, count: 36}, {min: 50, max: 80}, 80);244 var isTotal = serverTiming.metric.toLowerCase() === 'total';245 var tr = tableElement.createChild('tr', isTotal ? 'network-timing-footer' : '');246 var metric = tr.createChild('td', 'network-timing-metric');247 metric.createTextChild(serverTiming.description || serverTiming.metric);248 var row = tr.createChild('td').createChild('div', 'network-timing-row');249 var left = scale * (endTime - startTime - serverTiming.value);250 if (serverTiming.value && left >= 0) { /​/​ don't chart values too big or too small251 var bar = row.createChild('span', 'network-timing-bar server-timing');252 bar.style.left = left + '%';253 bar.style.right = right + '%';254 bar.textContent = '\u200B'; /​/​ Important for 0-time items to have 0 width.255 if (!isTotal)256 bar.style.backgroundColor = colorGenerator.colorForID(serverTiming.metric);257 }258 var label = tr.createChild('td').createChild('div', 'network-timing-bar-title');259 if (typeof serverTiming.value === 'number') /​/​ a metric timing value is optional260 label.textContent = Number.secondsToString(serverTiming.value, true);261 }262 /​**263 * param {string} title264 */​265 function createHeader(title) {266 var dataHeader = tableElement.createChild('tr', 'network-timing-table-header');267 dataHeader.createChild('td').createTextChild(title);268 dataHeader.createChild('td').createTextChild('');269 dataHeader.createChild('td').createTextChild(Common.UIString('TIME'));270 return dataHeader;271 }272 }273 /​**274 * @override275 */​276 wasShown() {277 this._request.addEventListener(SDK.NetworkRequest.Events.TimingChanged, this._refresh, this);278 this._request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading, this._refresh, this);279 this._calculator.addEventListener(Network.NetworkTimeCalculator.Events.BoundariesChanged, this._refresh, this);280 this._refresh();281 }282 /​**283 * @override...

Full Screen

Full Screen

route.js

Source:route.js Github

copy

Full Screen

...45 * @return {!settings.Route}46 * @private47 */​48 createSection: function(path, section) {49 var route = this.createChild(path);50 route.section = section;51 return route;52 },53 /​**54 * Returns true if this route matches or is an ancestor of the parameter.55 * @param {!settings.Route} route56 * @return {boolean}57 */​58 contains: function(route) {59 for (var r = route; r != null; r = r.parent) {60 if (this == r)61 return true;62 }63 return false;64 },65 /​**66 * Returns true if this route is a subpage of a section.67 * @return {boolean}68 */​69 isSubpage: function() {70 return !!this.parent && !!this.section &&71 this.parent.section == this.section;72 },73 };74 /​/​ Abbreviated variable for easier definitions.75 var r = Route;76 /​/​ Root pages.77 r.BASIC = new Route('/​');78 r.ADVANCED = new Route('/​advanced');79 r.ABOUT = new Route('/​help');80 /​/​ Navigable dialogs. These are the only non-section children of root pages.81 /​/​ These are disfavored. If we add anymore, we should add explicit support.82 r.IMPORT_DATA = r.BASIC.createChild('/​importData');83 r.SIGN_OUT = r.BASIC.createChild('/​signOut');84 r.CLEAR_BROWSER_DATA = r.ADVANCED.createChild('/​clearBrowserData');85 r.RESET_DIALOG = r.ADVANCED.createChild('/​resetProfileSettings');86 r.TRIGGERED_RESET_DIALOG =87 r.ADVANCED.createChild('/​triggeredResetProfileSettings');88<if expr="chromeos">89 r.INTERNET = r.BASIC.createSection('/​internet', 'internet');90 r.NETWORK_DETAIL = r.INTERNET.createChild('/​networkDetail');91 r.KNOWN_NETWORKS = r.INTERNET.createChild('/​knownNetworks');92</​if>93 r.APPEARANCE = r.BASIC.createSection('/​appearance', 'appearance');94 r.FONTS = r.APPEARANCE.createChild('/​fonts');95 r.DEFAULT_BROWSER =96 r.BASIC.createSection('/​defaultBrowser', 'defaultBrowser');97 r.SEARCH = r.BASIC.createSection('/​search', 'search');98 r.SEARCH_ENGINES = r.SEARCH.createChild('/​searchEngines');99 r.ON_STARTUP = r.BASIC.createSection('/​onStartup', 'onStartup');100 r.PEOPLE = r.BASIC.createSection('/​people', 'people');101 r.SYNC = r.PEOPLE.createChild('/​syncSetup');102<if expr="not chromeos">103 r.MANAGE_PROFILE = r.PEOPLE.createChild('/​manageProfile');104</​if>105<if expr="chromeos">106 r.CHANGE_PICTURE = r.PEOPLE.createChild('/​changePicture');107 r.ACCOUNTS = r.PEOPLE.createChild('/​accounts');108 r.LOCK_SCREEN = r.PEOPLE.createChild('/​lockScreen');109 r.DEVICE = r.BASIC.createSection('/​device', 'device');110 r.POINTERS = r.DEVICE.createChild('/​pointer-overlay');111 r.KEYBOARD = r.DEVICE.createChild('/​keyboard-overlay');112 r.DISPLAY = r.DEVICE.createChild('/​display');113 r.STYLUS = r.DEVICE.createChild('/​stylus');114 r.STORAGE = r.DEVICE.createChild('/​storage');115</​if>116 r.PRIVACY = r.ADVANCED.createSection('/​privacy', 'privacy');117 r.CERTIFICATES = r.PRIVACY.createChild('/​certificates');118 r.SITE_SETTINGS = r.PRIVACY.createChild('/​content');119 r.SITE_SETTINGS_ALL = r.SITE_SETTINGS.createChild('all');120 r.SITE_SETTINGS_SITE_DETAILS =121 r.SITE_SETTINGS_ALL.createChild('/​content/​siteDetails');122 r.SITE_SETTINGS_HANDLERS = r.SITE_SETTINGS.createChild('/​handlers');123 /​/​ TODO(tommycli): Find a way to refactor these repetitive category routes.124 r.SITE_SETTINGS_AUTOMATIC_DOWNLOADS =125 r.SITE_SETTINGS.createChild('automaticDownloads');126 r.SITE_SETTINGS_BACKGROUND_SYNC =127 r.SITE_SETTINGS.createChild('backgroundSync');128 r.SITE_SETTINGS_CAMERA = r.SITE_SETTINGS.createChild('camera');129 r.SITE_SETTINGS_COOKIES = r.SITE_SETTINGS.createChild('cookies');130 r.SITE_SETTINGS_DATA_DETAILS =131 r.SITE_SETTINGS_COOKIES.createChild('/​cookies/​detail');132 r.SITE_SETTINGS_IMAGES = r.SITE_SETTINGS.createChild('images');133 r.SITE_SETTINGS_JAVASCRIPT = r.SITE_SETTINGS.createChild('javascript');134 r.SITE_SETTINGS_KEYGEN = r.SITE_SETTINGS.createChild('keygen');135 r.SITE_SETTINGS_LOCATION = r.SITE_SETTINGS.createChild('location');136 r.SITE_SETTINGS_MICROPHONE = r.SITE_SETTINGS.createChild('microphone');137 r.SITE_SETTINGS_NOTIFICATIONS = r.SITE_SETTINGS.createChild('notifications');138 r.SITE_SETTINGS_FLASH = r.SITE_SETTINGS.createChild('flash');139 r.SITE_SETTINGS_POPUPS = r.SITE_SETTINGS.createChild('popups');140 r.SITE_SETTINGS_UNSANDBOXED_PLUGINS =141 r.SITE_SETTINGS.createChild('unsandboxedPlugins');142 r.SITE_SETTINGS_USB_DEVICES = r.SITE_SETTINGS.createChild('usbDevices');143 r.SITE_SETTINGS_ZOOM_LEVELS = r.SITE_SETTINGS.createChild('zoomLevels');144 r.SITE_SETTINGS_PDF_DOCUMENTS = r.SITE_SETTINGS.createChild('pdfDocuments');145<if expr="chromeos">146 r.DATETIME = r.ADVANCED.createSection('/​dateTime', 'dateTime');147 r.BLUETOOTH = r.ADVANCED.createSection('/​bluetooth', 'bluetooth');148</​if>149 r.PASSWORDS =150 r.ADVANCED.createSection('/​passwordsAndForms', 'passwordsAndForms');151 r.AUTOFILL = r.PASSWORDS.createChild('/​autofill');152 r.MANAGE_PASSWORDS = r.PASSWORDS.createChild('/​passwords');153 r.LANGUAGES = r.ADVANCED.createSection('/​languages', 'languages');154<if expr="chromeos">155 r.INPUT_METHODS = r.LANGUAGES.createChild('/​inputMethods');156</​if>157<if expr="not is_macosx">158 r.EDIT_DICTIONARY = r.LANGUAGES.createChild('/​editDictionary');159</​if>160 r.DOWNLOADS = r.ADVANCED.createSection('/​downloads', 'downloads');161 r.PRINTING = r.ADVANCED.createSection('/​printing', 'printing');162 r.CLOUD_PRINTERS = r.PRINTING.createChild('/​cloudPrinters');163<if expr="chromeos">164 r.CUPS_PRINTERS = r.PRINTING.createChild('/​cupsPrinters');165 r.CUPS_PRINTER_DETAIL = r.CUPS_PRINTERS.createChild('/​cupsPrinterDetails');166</​if>167 r.ACCESSIBILITY = r.ADVANCED.createSection('/​accessibility', 'a11y');168 r.MANAGE_ACCESSIBILITY = r.ACCESSIBILITY.createChild('/​manageAccessibility');169 r.SYSTEM = r.ADVANCED.createSection('/​system', 'system');170 r.RESET = r.ADVANCED.createSection('/​reset', 'reset');171<if expr="chromeos">172 /​/​ "About" is the only section in About, but we still need to create the route173 /​/​ in order to show the subpage on Chrome OS.174 r.ABOUT_ABOUT = r.ABOUT.createSection('/​help/​about', 'about');175 r.DETAILED_BUILD_INFO = r.ABOUT_ABOUT.createChild('/​help/​details');176</​if>177 var routeObservers_ = new Set();178 /​** @polymerBehavior */​179 var RouteObserverBehavior = {180 /​** @override */​181 attached: function() {182 assert(!routeObservers_.has(this));183 routeObservers_.add(this);184 /​/​ Emulating Polymer data bindings, the observer is called when the185 /​/​ element starts observing the route.186 this.currentRouteChanged(currentRoute_, undefined);187 },188 /​** @override */​189 detached: function() {...

Full Screen

Full Screen

base.js

Source:base.js Github

copy

Full Screen

...222 * 엘리먼트 관련 메소드 (그라데이션)223 *224 */​225 this.stop = function(attr) {226 return this.createChild(new Element(), "stop", attr);227 }228 /​**229 * 엘리먼트 관련 메소드 (애니메이션)230 *231 */​232 this.animate = function(attr) {233 return this.createChild(new Element(), "animate", attr);234 }235 this.animateColor = function(attr) {236 return this.createChild(new Element(), "animateColor", attr);237 }238 this.animateMotion = function(attr) {239 return this.createChild(new Element(), "animateMotion", attr);240 }241 this.animateTransform = function(attr) {242 return this.createChild(new Element(), "animateTransform", attr);243 }244 this.mpath = function(attr) {245 return this.createChild(new Element(), "mpath", attr);246 }247 this.set = function(attr) {248 return this.createChild(new Element(), "set", attr);249 }250 /​**251 * 엘리먼트 관련 메소드 (필터)252 *253 */​254 this.feBlend = function(attr) {255 return this.createChild(new Element(), "feBlend", attr);256 }257 this.feColorMatrix = function(attr) {258 return this.createChild(new Element(), "feColorMatrix", attr);259 }260 this.feComponentTransfer = function(attr) {261 return this.createChild(new Element(), "feComponentTransfer", attr);262 }263 this.feComposite = function(attr) {264 return this.createChild(new Element(), "feComposite", attr);265 }266 this.feConvolveMatrix = function(attr) {267 return this.createChild(new Element(), "feConvolveMatrix", attr);268 }269 this.feDiffuseLighting = function(attr) {270 return this.createChild(new Element(), "feDiffuseLighting", attr);271 }272 this.feDisplacementMap = function(attr) {273 return this.createChild(new Element(), "feDisplacementMap", attr);274 }275 this.feFlood = function(attr) {276 return this.createChild(new Element(), "feFlood", attr);277 }278 this.feGaussianBlur = function(attr) {279 return this.createChild(new Element(), "feGaussianBlur", attr);280 }281 this.feImage = function(attr) {282 return this.createChild(new Element(), "feImage", attr);283 }284 this.feMerge = function(attr, callback) {285 return this.createChild(new Element(), "feMerge", attr, callback);286 }287 this.feMergeNode = function(attr) {288 return this.createChild(new Element(), "feMergeNode", attr);289 }290 this.feMorphology = function(attr) {291 return this.createChild(new Element(), "feMorphology", attr);292 }293 this.feOffset = function(attr) {294 return this.createChild(new Element(), "feOffset", attr);295 }296 this.feSpecularLighting = function(attr) {297 return this.createChild(new Element(), "feSpecularLighting", attr);298 }299 this.feTile = function(attr) {300 return this.createChild(new Element(), "feTile", attr);301 }302 this.feTurbulence = function(attr) {303 return this.createChild(new Element(), "feTurbulence", attr);304 }305 }306 SVGBase.create = function(name, attr, callback) {307 if(globalObj == null) {308 globalObj = new SVGBase();309 }310 return globalObj.custom(name, attr, callback);311 }312 return SVGBase;...

Full Screen

Full Screen

os_route.js

Source:os_route.js Github

copy

Full Screen

...11 const r = {};12 /​/​ Root pages.13 r.BASIC = new settings.Route('/​');14 r.ABOUT = new settings.Route('/​help');15 r.SIGN_OUT = r.BASIC.createChild('/​signOut');16 r.SIGN_OUT.isNavigableDialog = true;17 r.SEARCH = r.BASIC.createSection('/​search', 'search');18 if (!loadTimeData.getBoolean('isGuest')) {19 r.PEOPLE = r.BASIC.createSection('/​people', 'people');20 r.SYNC = r.PEOPLE.createChild('/​syncSetup');21 if (!loadTimeData.getBoolean('splitSettingsSyncEnabled')) {22 r.SYNC_ADVANCED = r.SYNC.createChild('/​syncSetup/​advanced');23 }24 }25 r.INTERNET = r.BASIC.createSection('/​internet', 'internet');26 r.INTERNET_NETWORKS = r.INTERNET.createChild('/​networks');27 r.NETWORK_DETAIL = r.INTERNET.createChild('/​networkDetail');28 r.KNOWN_NETWORKS = r.INTERNET.createChild('/​knownNetworks');29 r.BLUETOOTH = r.BASIC.createSection('/​bluetooth', 'bluetooth');30 r.BLUETOOTH_DEVICES = r.BLUETOOTH.createChild('/​bluetoothDevices');31 r.DEVICE = r.BASIC.createSection('/​device', 'device');32 r.POINTERS = r.DEVICE.createChild('/​pointer-overlay');33 r.KEYBOARD = r.DEVICE.createChild('/​keyboard-overlay');34 r.STYLUS = r.DEVICE.createChild('/​stylus');35 r.DISPLAY = r.DEVICE.createChild('/​display');36 r.STORAGE = r.DEVICE.createChild('/​storage');37 r.EXTERNAL_STORAGE_PREFERENCES =38 r.DEVICE.createChild('/​storage/​externalStoragePreferences');39 r.POWER = r.DEVICE.createChild('/​power');40 /​/​ "About" is the only section in About, but we still need to create the41 /​/​ route in order to show the subpage on Chrome OS.42 r.ABOUT_ABOUT = r.ABOUT.createSection('/​help/​about', 'about');43 r.DETAILED_BUILD_INFO = r.ABOUT_ABOUT.createChild('/​help/​details');44 if (!loadTimeData.getBoolean('isGuest')) {45 r.MULTIDEVICE = r.BASIC.createSection('/​multidevice', 'multidevice');46 r.MULTIDEVICE_FEATURES =47 r.MULTIDEVICE.createChild('/​multidevice/​features');48 r.SMART_LOCK =49 r.MULTIDEVICE_FEATURES.createChild('/​multidevice/​features/​smartLock');50 r.ACCOUNTS = r.PEOPLE.createChild('/​accounts');51 r.ACCOUNT_MANAGER = r.PEOPLE.createChild('/​accountManager');52 r.KERBEROS_ACCOUNTS = r.PEOPLE.createChild('/​kerberosAccounts');53 r.LOCK_SCREEN = r.PEOPLE.createChild('/​lockScreen');54 r.FINGERPRINT = r.LOCK_SCREEN.createChild('/​lockScreen/​fingerprint');55 }56 if (loadTimeData.valueExists('showCrostini') &&57 loadTimeData.getBoolean('showCrostini')) {58 r.CROSTINI = r.BASIC.createSection('/​crostini', 'crostini');59 r.CROSTINI_ANDROID_ADB = r.CROSTINI.createChild('/​crostini/​androidAdb');60 r.CROSTINI_DETAILS = r.CROSTINI.createChild('/​crostini/​details');61 if (loadTimeData.valueExists('showCrostiniExportImport') &&62 loadTimeData.getBoolean('showCrostiniExportImport')) {63 r.CROSTINI_EXPORT_IMPORT =64 r.CROSTINI_DETAILS.createChild('/​crostini/​exportImport');65 }66 r.CROSTINI_PORT_FORWARDING =67 r.CROSTINI_DETAILS.createChild('/​crostini/​portForwarding');68 r.CROSTINI_SHARED_PATHS =69 r.CROSTINI_DETAILS.createChild('/​crostini/​sharedPaths');70 r.CROSTINI_SHARED_USB_DEVICES =71 r.CROSTINI_DETAILS.createChild('/​crostini/​sharedUsbDevices');72 if (loadTimeData.valueExists('showCrostiniDiskResize') &&73 loadTimeData.getBoolean('showCrostiniDiskResize')) {74 r.CROSTINI_DISK_RESIZE =75 r.CROSTINI_DETAILS.createChild('/​crostini/​diskResize');76 }77 }78 if (loadTimeData.valueExists('showPluginVm') &&79 loadTimeData.getBoolean('showPluginVm')) {80 r.PLUGIN_VM = r.BASIC.createSection('/​pluginVm', 'pluginVm');81 r.PLUGIN_VM_DETAILS = r.PLUGIN_VM.createChild('/​pluginVm/​details');82 r.PLUGIN_VM_SHARED_PATHS =83 r.PLUGIN_VM.createChild('/​pluginVm/​sharedPaths');84 }85 r.GOOGLE_ASSISTANT = r.SEARCH.createChild('/​googleAssistant');86 r.ADVANCED = new settings.Route('/​advanced');87 r.PRIVACY = r.ADVANCED.createSection('/​privacy', 'privacy');88 /​/​ Languages and input89 r.LANGUAGES = r.ADVANCED.createSection('/​languages', 'languages');90 r.LANGUAGES_DETAILS = r.LANGUAGES.createChild('/​languages/​details');91 r.INPUT_METHODS =92 r.LANGUAGES_DETAILS.createChild('/​languages/​inputMethods');93 r.PRINTING = r.ADVANCED.createSection('/​printing', 'printing');94 r.ACCESSIBILITY = r.ADVANCED.createSection('/​accessibility', 'a11y');95 if (!loadTimeData.getBoolean('isGuest')) {96 if (loadTimeData.getBoolean('splitSettingsSyncEnabled')) {97 r.OS_SYNC = r.PEOPLE.createChild('/​osSync');98 }99 /​/​ Personalization100 r.PERSONALIZATION =101 r.BASIC.createSection('/​personalization', 'personalization');102 r.CHANGE_PICTURE = r.PERSONALIZATION.createChild('/​changePicture');103 /​/​ Files (analogous to Downloads)104 r.FILES = r.ADVANCED.createSection('/​files', 'files');105 r.SMB_SHARES = r.FILES.createChild('/​smbShares');106 }107 /​/​ Reset108 if (loadTimeData.valueExists('allowPowerwash') &&109 loadTimeData.getBoolean('allowPowerwash')) {110 r.RESET = r.ADVANCED.createSection('/​reset', 'reset');111 }112 const showAppManagement = loadTimeData.valueExists('showAppManagement') &&113 loadTimeData.getBoolean('showAppManagement');114 const showAndroidApps = loadTimeData.valueExists('androidAppsVisible') &&115 loadTimeData.getBoolean('androidAppsVisible');116 /​/​ Apps117 if (showAppManagement || showAndroidApps) {118 r.APPS = r.BASIC.createSection('/​apps', 'apps');119 if (showAppManagement) {120 r.APP_MANAGEMENT = r.APPS.createChild('/​app-management');121 r.APP_MANAGEMENT_DETAIL =122 r.APP_MANAGEMENT.createChild('/​app-management/​detail');123 }124 if (showAndroidApps) {125 r.ANDROID_APPS_DETAILS = r.APPS.createChild('/​androidAppsDetails');126 }127 }128 r.DATETIME = r.ADVANCED.createSection('/​dateTime', 'dateTime');129 r.DATETIME_TIMEZONE_SUBPAGE = r.DATETIME.createChild('/​dateTime/​timeZone');130 r.CUPS_PRINTERS = r.PRINTING.createChild('/​cupsPrinters');131 r.MANAGE_ACCESSIBILITY =132 r.ACCESSIBILITY.createChild('/​manageAccessibility');133 if (loadTimeData.getBoolean('showExperimentalAccessibilitySwitchAccess')) {134 r.MANAGE_SWITCH_ACCESS_SETTINGS = r.MANAGE_ACCESSIBILITY.createChild(135 '/​manageAccessibility/​switchAccess');136 }137 r.MANAGE_TTS_SETTINGS =138 r.MANAGE_ACCESSIBILITY.createChild('/​manageAccessibility/​tts');139 r.MANAGE_CAPTION_SETTINGS =140 r.MANAGE_ACCESSIBILITY.createChild('/​manageAccessibility/​captions');141 return r;142 }143 /​**144 * @return {!settings.Router} A router with at least those routes common to OS145 * and browser settings. If the window is not in OS settings (based on146 * loadTimeData) then browser specific routes are added. If the window is147 * OS settings or if Chrome OS is using a consolidated settings page for148 * OS and browser settings then OS specific routes are added.149 */​150 function buildRouter() {151 return new settings.Router(createOSSettingsRoutes());152 }153 settings.Router.setInstance(buildRouter());154 window.addEventListener('popstate', function(event) {...

Full Screen

Full Screen

ReportView.js

Source:ReportView.js Github

copy

Full Screen

...10 */​11 constructor(title) {12 super(true);13 this.registerRequiredCSS('ui/​reportView.css');14 var contentBox = this.contentElement.createChild('div', 'report-content-box');15 this._headerElement = contentBox.createChild('div', 'report-header vbox');16 this._headerElement.createChild('div', 'report-title').textContent = title;17 this._sectionList = contentBox.createChild('div', 'vbox');18 }19 /​**20 * @param {string} subtitle21 */​22 setSubtitle(subtitle) {23 if (this._subtitleElement && this._subtitleElement.textContent === subtitle)24 return;25 if (!this._subtitleElement)26 this._subtitleElement = this._headerElement.createChild('div', 'report-subtitle');27 this._subtitleElement.textContent = subtitle;28 }29 /​**30 * @param {?Element} link31 */​32 setURL(link) {33 if (!this._urlElement)34 this._urlElement = this._headerElement.createChild('div', 'report-url link');35 this._urlElement.removeChildren();36 if (link)37 this._urlElement.appendChild(link);38 }39 /​**40 * @return {!UI.Toolbar}41 */​42 createToolbar() {43 var toolbar = new UI.Toolbar('');44 this._headerElement.appendChild(toolbar.element);45 return toolbar;46 }47 /​**48 * @param {string} title49 * @param {string=} className50 * @return {!UI.ReportView.Section}51 */​52 appendSection(title, className) {53 var section = new UI.ReportView.Section(title, className);54 section.show(this._sectionList);55 return section;56 }57 removeAllSection() {58 this._sectionList.removeChildren();59 }60};61/​**62 * @unrestricted63 */​64UI.ReportView.Section = class extends UI.VBox {65 /​**66 * @param {string} title67 * @param {string=} className68 */​69 constructor(title, className) {70 super();71 this.element.classList.add('report-section');72 if (className)73 this.element.classList.add(className);74 this._headerElement = this.element.createChild('div', 'report-section-header');75 this._titleElement = this._headerElement.createChild('div', 'report-section-title');76 this._titleElement.textContent = title;77 this._fieldList = this.element.createChild('div', 'vbox');78 /​** @type {!Map.<string, !Element>} */​79 this._fieldMap = new Map();80 }81 /​**82 * @param {string} title83 */​84 setTitle(title) {85 if (this._titleElement.textContent !== title)86 this._titleElement.textContent = title;87 }88 /​**89 * @return {!UI.Toolbar}90 */​91 createToolbar() {92 var toolbar = new UI.Toolbar('');93 this._headerElement.appendChild(toolbar.element);94 return toolbar;95 }96 /​**97 * @param {string} title98 * @param {string=} textValue99 * @return {!Element}100 */​101 appendField(title, textValue) {102 var row = this._fieldMap.get(title);103 if (!row) {104 row = this._fieldList.createChild('div', 'report-field');105 row.createChild('div', 'report-field-name').textContent = title;106 this._fieldMap.set(title, row);107 row.createChild('div', 'report-field-value');108 }109 if (textValue)110 row.lastElementChild.textContent = textValue;111 return /​** @type {!Element} */​ (row.lastElementChild);112 }113 remove() {114 this.element.remove();115 }116 /​**117 * @param {string} title118 */​119 removeField(title) {120 var row = this._fieldMap.get(title);121 if (row)122 row.remove();123 this._fieldMap.delete(title);124 }125 /​**126 * @param {string} title127 * @param {boolean} visible128 */​129 setFieldVisible(title, visible) {130 var row = this._fieldMap.get(title);131 if (row)132 row.classList.toggle('hidden', !visible);133 }134 /​**135 * @param {string} title136 * @return {?Element}137 */​138 fieldValue(title) {139 var row = this._fieldMap.get(title);140 return row ? row.lastElementChild : null;141 }142 /​**143 * @return {!Element}144 */​145 appendRow() {146 return this._fieldList.createChild('div', 'report-row');147 }148 clearContent() {149 this._fieldList.removeChildren();150 this._fieldMap.clear();151 }...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 const child = await page._delegate.createChild();7 await child.close();8 await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12 const browser = await chromium.launch();13 const context = await browser.newContext();14 const page = await context.newPage();15 const child = await page._delegate.createChild();16 await child.close();17 await browser.close();18})();19 at CDPSession.send (/​Users/​rahul/​Desktop/​playwright-test/​node_modules/​playwright-core/​lib/​cjs/​pw-run.js:34:23)20 at CDPSession.send (/​Users/​rahul/​Desktop/​playwright-test/​node_modules/​playwright-core/​lib/​cjs/​pw-run.js:34:23)21 at CDPSession.send (/​Users/​rahul/​Desktop/​playwright-test/​node_modules/​playwright-core/​lib/​cjs/​pw-run.js:34:23)22 at CDPSession.send (/​Users/​rahul/​Desktop/​playwright-test/​node_modules/​playwright-core/​lib/​cjs/​pw-run.js:34:23)23 at CDPSession.send (/​Users/​rahul/​Desktop/​playwright-test/​node_modules/​playwright-core/​lib/​cjs/​pw-run.js:34:23)24 at CDPSession.send (/​Users/​rahul/​Desktop/​playwright-test/​node_modules/​playwright-core/​lib/​cjs/​pw-run.js:34:23)25 at CDPSession.send (/​Users/​rahul/​Desktop/​playwright-test/​node_modules/​playwright-core/​lib/​cjs/​pw-run.js:34:23)26 at CDPSession.send (/​Users/​rahul/​Desktop/​playwright-test/​node_modules/​playwright-core/​lib/​cjs/​pw-run.js:34:23)27 at CDPSession.send (/​Users/​rahul/​Desktop/​playwright-test/​node_modules/​playwright-core/​lib/​cjs/​pw-run.js:34:23)28 at CDPSession.send (/​Users/​rah

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { firefox } = require('playwright');2(async () => {3 const browser = await firefox.launch({ headless: false });4 const context = await browser.newContext();5 const page = await context.newPage();6 const child = await page.context().createChild();7 const childPage = await child.newPage();8 await childPage.goto('

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const child = await page.context().createChild();6 const childPage = await child.newPage();7 await child.close();8 await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12 const browser = await chromium.launch();13 const page = await browser.newPage();14 const child = await page.context().createChild();15 const childPage = await child.newPage();16 await child.close();17 await browser.close();18})();19const { chromium } = require('playwright');20(async () => {21 const browser = await chromium.launch();22 const page = await browser.newPage();23 const child = await page.context().createChild();24 const childPage = await child.newPage();25 await child.close();26 await browser.close();27})();28const { chromium } = require('playwright');29(async () => {30 const browser = await chromium.launch();31 const page = await browser.newPage();32 const child = await page.context().createChild();33 const childPage = await child.newPage();34 await child.close();35 await browser.close();36})();37const { chromium } = require('playwright');38(async () => {39 const browser = await chromium.launch();40 const page = await browser.newPage();41 const child = await page.context().createChild();42 const childPage = await child.newPage();43 await child.close();44 await browser.close();45})();46const { chromium } = require('playwright');47(async () => {48 const browser = await chromium.launch();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const child = await page.context().createChild();6 const childPage = await child.newPage();7 await child.close();8 await browser.close();9})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const playwright = require('playwright');2const { chromium } = playwright;3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const child = await page._delegate.createChild();8 await child.close();9 await context.close();10 await browser.close();11})();12const playwright = require('playwright');13const { chromium } = playwright;14(async () => {15 const browser = await chromium.launch();16 const context = await browser.newContext();17 const page = await context.newPage();18 const child = await page._delegate.createChild();19 await child.close();20 await context.close();21 await browser.close();22})();23 at CDPSession.send (C:\Users\user\Documents\playwright\playwright\lib\client\cdpSession.js:86:13)24 at async CDPSession.sendMayFail (C:\Users\user\Documents\playwright\playwright\lib\client\cdpSession.js:100:16)25 at async CDPSession.send (C:\Users\user\Documents\playwright\playwright\lib\client\cdpSession.js:93:12)26 at async CDPSession.sendMayFail (C:\Users\user\Documents\playwright\playwright\lib\client\cdpSession.js:100:16)27 at async Object.closeTarget (C:\Users\user\Documents\playwright\playwright\lib\client\protocol\protocol.js:347:5)28 at async Page.close (C:\Users\user\Documents\playwright\playwright\lib\page.js:221:5)29 at async Object.<anonymous> (C:\Users\user\Documents\playwright\test.js:19:5)30 at async ModuleJob.run (internal/​modules/​esm/​module_job.js:152:23)31 at async Promise.all (index 0)32 at async ESMLoader.import (internal/​modules/​esm/​loader.js:169:24)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const child = await page.context().createChild();6 const childPage = await child.newPage();7 await browser.close();8})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2const browser = await chromium.launch({ headless: false });3const page = await browser.newPage();4const child = await page.context().createChild();5const childPage = await child.newPage();6await child.close();7const { chromium } = require('playwright');8const browser = await chromium.launch({ headless: false });9const context = await browser.newContext();10const page = await context.newPage();11const child = await context.createChild();12const childPage = await child.newPage();13await child.close();14const { chromium } = require('playwright');15const browser = await chromium.launch({ headless: false });16const context = await browser.newContext();17const page = await context.newPage();18const child = await page.context().createChild();19const childPage = await child.newPage();20await child.close();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { chromium } from 'playwright';2import { createChild } from 'playwright/​lib/​server/​browserContext';3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const childContext = createChild(context);8 const childPage = await childContext.newPage();9 await childPage.screenshot({ path: 'child-page.png' });10 await browser.close();11})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { createChild } = require('playwright/​lib/​server/​browserServer');2const { env } = require('process');3const { chromium } = require('playwright');4const browser = await chromium.launch();5const browserServer = await browser._createServer();6const childProcess = await createChild(browserServer._process, browserServer._gracefullyClose, env);7childProcess.on('exit', (code) => {8 console.log('child process exited with code ' + code);9});10childProcess.on('message', (message) => {11 console.log('child process message ' + message);12});13childProcess.on('error', (error) => {14 console.log('child process error ' + error);15});16childProcess.on('close', (code) => {17 console.log('child process closed with code ' + code);18});19childProcess.on('disconnect', () => {20 console.log('child process disconnected');21});22childProcess.on('uncaughtException', (error) => {23 console.log('child process uncaughtException ' + error);24});25const { createChild } = require('playwright/​lib/​server/​browserServer');26const { env } = require('process');27const { chromium } = require('playwright');28const browser = await chromium.launch();29const browserServer = await browser._createServer();30const childProcess = await createChild(browserServer._process, browserServer._gracefullyClose, env);31childProcess.on('exit', (code) => {32 console.log('child process exited with code ' + code);33});34childProcess.on('message', (message) => {35 console.log('child process message ' + message);36});37childProcess.on('error', (error) => {38 console.log('child process error ' + error);39});40childProcess.on('close', (code) => {41 console.log('child process closed with code ' + code);42});43childProcess.on('disconnect', () => {44 console.log('child process disconnected');45});46childProcess.on('uncaughtException', (error) => {47 console.log('child process uncaughtException ' + error);48});49const { createChild } = require('playwright/​lib/​server/​browserServer

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { createChild } = require('@playwright/​test');2const child = createChild({3 env: {4 }5});6await child.run();7const { test } = require('@playwright/​test');8test('test', async ({}) => {9});

Full Screen

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful