Demo/bin/Debug/front_end/devices_module.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

WebInspector.DevicesView=function()
{WebInspector.VBox.call(this,true);this.registerRequiredCSS("devices/devicesView.css");this.contentElement.classList.add("devices-view");var hbox=this.contentElement.createChild("div","hbox flex-auto");var sidebar=hbox.createChild("div","devices-sidebar");sidebar.createChild("div","devices-view-title").createTextChild(WebInspector.UIString("Devices"));this._sidebarList=sidebar.createChild("div","devices-sidebar-list");this._discoveryView=new WebInspector.DevicesView.DiscoveryView();this._sidebarListSpacer=this._sidebarList.createChild("div","devices-sidebar-spacer");this._discoveryListItem=this._sidebarList.createChild("div","devices-sidebar-item");this._discoveryListItem.textContent=WebInspector.UIString("Settings");this._discoveryListItem.addEventListener("click",this._selectSidebarListItem.bind(this,this._discoveryListItem,this._discoveryView));this._viewById=new Map();this._devices=[];this._listItemById=new Map();this._viewContainer=hbox.createChild("div","flex-auto vbox");var discoveryFooter=this.contentElement.createChild("div","devices-footer");this._deviceCountSpan=discoveryFooter.createChild("span");discoveryFooter.createChild("span").textContent=WebInspector.UIString(" Read ");discoveryFooter.appendChild(WebInspector.linkifyURLAsNode("https://developers.google.com/chrome-developer-tools/docs/remote-debugging",WebInspector.UIString("remote debugging documentation"),undefined,true));discoveryFooter.createChild("span").textContent=WebInspector.UIString(" for more information.");this._updateFooter();this._selectSidebarListItem(this._discoveryListItem,this._discoveryView);InspectorFrontendHost.events.addEventListener(InspectorFrontendHostAPI.Events.DevicesUpdated,this._devicesUpdated,this);InspectorFrontendHost.events.addEventListener(InspectorFrontendHostAPI.Events.DevicesDiscoveryConfigChanged,this._devicesDiscoveryConfigChanged,this);this.contentElement.tabIndex=0;this.setDefaultFocusedElement(this.contentElement);}
WebInspector.DevicesView.prototype={_selectSidebarListItem:function(listItem,view)
{if(this._selectedListItem===listItem)
return;if(this._selectedListItem){this._selectedListItem.classList.remove("selected");this._visibleView.detach();}
this._visibleView=view;this._selectedListItem=listItem;this._visibleView.show(this._viewContainer);this._selectedListItem.classList.add("selected");},_devicesUpdated:function(event)
{this._devices=(event.data).slice();for(var device of this._devices){if(!device.adbConnected)
device.adbModel=WebInspector.UIString("Unknown");}
var ids=new Set();for(var device of this._devices)
ids.add(device.id);var selectedRemoved=false;for(var deviceId of this._viewById.keys()){if(!ids.has(deviceId)){var listItem=(this._listItemById.get(deviceId));this._listItemById.remove(deviceId);this._viewById.remove(deviceId);listItem.remove();if(listItem===this._selectedListItem)
selectedRemoved=true;}}
for(var device of this._devices){var view=this._viewById.get(device.id);var listItem=this._listItemById.get(device.id);if(!view){view=new WebInspector.DevicesView.DeviceView();this._viewById.set(device.id,view);listItem=this._createSidebarListItem(view);this._listItemById.set(device.id,listItem);this._sidebarList.insertBefore(listItem,this._sidebarListSpacer);}
listItem._title.textContent=device.adbModel;listItem._status.textContent=device.adbConnected?WebInspector.UIString("Connected"):WebInspector.UIString("Pending Authorization");listItem.classList.toggle("device-connected",device.adbConnected);view.update(device);}
if(selectedRemoved)
this._selectSidebarListItem(this._discoveryListItem,this._discoveryView);this._updateFooter();},_createSidebarListItem:function(view)
{var listItem=createElementWithClass("div","devices-sidebar-item");listItem.addEventListener("click",this._selectSidebarListItem.bind(this,listItem,view));listItem._title=listItem.createChild("div","devices-sidebar-item-title");listItem._status=listItem.createChild("div","devices-sidebar-item-status");return listItem;},_devicesDiscoveryConfigChanged:function(event)
{var discoverUsbDevices=(event.data["discoverUsbDevices"]);var portForwardingEnabled=(event.data["portForwardingEnabled"]);var portForwardingConfig=(event.data["portForwardingConfig"]);this._discoveryView.discoveryConfigChanged(discoverUsbDevices,portForwardingEnabled,portForwardingConfig);},_updateFooter:function()
{this._deviceCountSpan.textContent=!this._devices.length?WebInspector.UIString("No devices detected."):this._devices.length===1?WebInspector.UIString("1 device detected."):WebInspector.UIString("%d devices detected.",this._devices.length);},wasShown:function()
{WebInspector.PanelWithSidebar.prototype.wasShown.call(this);InspectorFrontendHost.setDevicesUpdatesEnabled(true);},willHide:function()
{WebInspector.PanelWithSidebar.prototype.wasShown.call(this);InspectorFrontendHost.setDevicesUpdatesEnabled(false);},__proto__:WebInspector.VBox.prototype}
WebInspector.DevicesView._instance=function()
{if(!WebInspector.DevicesView._instanceObject)
WebInspector.DevicesView._instanceObject=new WebInspector.DevicesView();return WebInspector.DevicesView._instanceObject;}
WebInspector.DevicesView.DiscoveryView=function()
{WebInspector.VBox.call(this);this.setMinimumSize(100,100);this.element.classList.add("discovery-view");this.contentElement.createChild("div","hbox device-text-row").createChild("div","view-title").textContent=WebInspector.UIString("Settings");var discoverUsbDevicesCheckbox=createCheckboxLabel(WebInspector.UIString("Discover USB devices"));discoverUsbDevicesCheckbox.classList.add("usb-checkbox");this.element.appendChild(discoverUsbDevicesCheckbox);this._discoverUsbDevicesCheckbox=discoverUsbDevicesCheckbox.checkboxElement;this._discoverUsbDevicesCheckbox.addEventListener("click",this._updateDiscoveryConfig.bind(this),false);var help=this.element.createChild("div","discovery-help");help.createChild("span").textContent=WebInspector.UIString("Need help? Read Chrome ");help.appendChild(WebInspector.linkifyURLAsNode("https://developers.google.com/chrome-developer-tools/docs/remote-debugging",WebInspector.UIString("remote debugging documentation."),undefined,true));var portForwardingHeader=this.element.createChild("div","port-forwarding-header");var portForwardingEnabledCheckbox=createCheckboxLabel(WebInspector.UIString("Port forwarding"));portForwardingEnabledCheckbox.classList.add("port-forwarding-checkbox");portForwardingHeader.appendChild(portForwardingEnabledCheckbox);this._portForwardingEnabledCheckbox=portForwardingEnabledCheckbox.checkboxElement;this._portForwardingEnabledCheckbox.addEventListener("click",this._updateDiscoveryConfig.bind(this),false);var portForwardingFooter=this.element.createChild("div","port-forwarding-footer");portForwardingFooter.createChild("span").textContent=WebInspector.UIString("Define the listening port on your device that maps to a port accessible from your development machine. ");portForwardingFooter.appendChild(WebInspector.linkifyURLAsNode("https://developer.chrome.com/devtools/docs/remote-debugging#port-forwarding",WebInspector.UIString("Learn more"),undefined,true));this._list=new WebInspector.ListWidget(this);this._list.registerRequiredCSS("devices/devicesView.css");this._list.element.classList.add("port-forwarding-list");var placeholder=createElementWithClass("div","port-forwarding-list-empty");placeholder.textContent=WebInspector.UIString("No rules");this._list.setEmptyPlaceholder(placeholder);this._list.show(this.element);this.element.appendChild(createTextButton(WebInspector.UIString("Add rule"),this._addRuleButtonClicked.bind(this),"add-rule-button"));this._portForwardingConfig=[];}
WebInspector.DevicesView.DiscoveryView.prototype={_addRuleButtonClicked:function()
{this._list.addNewItem(this._portForwardingConfig.length,{port:"",address:""});},discoveryConfigChanged:function(discoverUsbDevices,portForwardingEnabled,portForwardingConfig)
{this._discoverUsbDevicesCheckbox.checked=discoverUsbDevices;this._portForwardingEnabledCheckbox.checked=portForwardingEnabled;this._portForwardingConfig=[];this._list.clear();for(var key of Object.keys(portForwardingConfig)){var rule=({port:key,address:portForwardingConfig[key]});this._portForwardingConfig.push(rule);this._list.appendItem(rule,true);}},renderItem:function(item,editable)
{var rule=(item);var element=createElementWithClass("div","port-forwarding-list-item");var port=element.createChild("div","port-forwarding-value port-forwarding-port");port.createChild("span","port-localhost").textContent=WebInspector.UIString("localhost:");port.createTextChild(rule.port);element.createChild("div","port-forwarding-separator");element.createChild("div","port-forwarding-value").textContent=rule.address;return element;},removeItemRequested:function(item,index)
{this._portForwardingConfig.splice(index,1);this._list.removeItem(index);this._updateDiscoveryConfig();},commitEdit:function(item,editor,isNew)
{var rule=(item);rule.port=editor.control("port").value.trim();rule.address=editor.control("address").value.trim();if(isNew)
this._portForwardingConfig.push(rule);this._updateDiscoveryConfig();},beginEdit:function(item)
{var rule=(item);var editor=this._createEditor();editor.control("port").value=rule.port;editor.control("address").value=rule.address;return editor;},_createEditor:function()
{if(this._editor)
return this._editor;var editor=new WebInspector.ListWidget.Editor();this._editor=editor;var content=editor.contentElement();var fields=content.createChild("div","port-forwarding-edit-row");fields.createChild("div","port-forwarding-value port-forwarding-port").appendChild(editor.createInput("port","text","Device port (3333)",portValidator.bind(this)));fields.createChild("div","port-forwarding-separator port-forwarding-separator-invisible");fields.createChild("div","port-forwarding-value").appendChild(editor.createInput("address","text","Local address (dev.example.corp:3333)",addressValidator));return editor;function portValidator(item,index,input)
{var value=input.value.trim();var match=value.match(/^(\d+)$/);if(!match)
return false;var port=parseInt(match[1],10);if(port<1024||port>65535)
return false;for(var i=0;i<this._portForwardingConfig.length;++i){if(i!==index&&this._portForwardingConfig[i].port===value)
return false;}
return true;}
function addressValidator(item,index,input)
{var match=input.value.trim().match(/^([a-zA-Z0-9\.\-_]+):(\d+)$/);if(!match)
return false;var port=parseInt(match[2],10);return port<=65535;}},_updateDiscoveryConfig:function()
{var configMap=({});for(var rule of this._portForwardingConfig)
configMap[rule.port]=rule.address;InspectorFrontendHost.setDevicesDiscoveryConfig(this._discoverUsbDevicesCheckbox.checked,this._portForwardingEnabledCheckbox.checked,configMap);},__proto__:WebInspector.VBox.prototype}
WebInspector.DevicesView.DeviceView=function()
{WebInspector.VBox.call(this);this.setMinimumSize(100,100);this.contentElement.classList.add("device-view");var topRow=this.contentElement.createChild("div","hbox device-text-row");this._deviceTitle=topRow.createChild("div","view-title");this._deviceSerial=topRow.createChild("div","device-serial");this._deviceOffline=this.contentElement.createChild("div");this._deviceOffline.textContent=WebInspector.UIString("Pending authentication: please accept debugging session on the device.");this._noBrowsers=this.contentElement.createChild("div");this._noBrowsers.textContent=WebInspector.UIString("No browsers detected.");this._browsers=this.contentElement.createChild("div","device-browser-list vbox");this._browserById=new Map();this._device=null;}
WebInspector.DevicesView.BrowserSection;WebInspector.DevicesView.PageSection;WebInspector.DevicesView.DeviceView.prototype={update:function(device)
{if(!this._device||this._device.adbModel!==device.adbModel)
this._deviceTitle.textContent=device.adbModel;if(!this._device||this._device.adbSerial!==device.adbSerial)
this._deviceSerial.textContent="#"+device.adbSerial;this._deviceOffline.classList.toggle("hidden",device.adbConnected);this._noBrowsers.classList.toggle("hidden",!device.adbConnected||device.browsers.length);this._browsers.classList.toggle("hidden",!device.adbConnected||!device.browsers.length);var browserIds=new Set();for(var browser of device.browsers)
browserIds.add(browser.id);for(var browserId of this._browserById.keys()){if(!browserIds.has(browserId)){this._browserById.get(browserId).element.remove();this._browserById.remove(browserId);}}
for(var browser of device.browsers){var section=this._browserById.get(browser.id);if(!section){section=this._createBrowserSection();this._browserById.set(browser.id,section);this._browsers.appendChild(section.element);}
this._updateBrowserSection(section,browser);}
this._device=device;},_createBrowserSection:function()
{var element=createElementWithClass("div","vbox flex-none");var topRow=element.createChild("div","");var title=topRow.createChild("div","device-browser-title");var newTabRow=element.createChild("div","device-browser-new-tab");newTabRow.createChild("div","").textContent=WebInspector.UIString("New tab:");var newTabInput=newTabRow.createChild("input","");newTabInput.type="text";newTabInput.placeholder=WebInspector.UIString("Enter URL");newTabInput.addEventListener("keydown",newTabKeyDown,false);var newTabButton=createTextButton(WebInspector.UIString("Open"),openNewTab);newTabRow.appendChild(newTabButton);var pages=element.createChild("div","device-page-list vbox");var viewMore=element.createChild("div","device-view-more");viewMore.addEventListener("click",viewMoreClick,false);updateViewMoreTitle();var section={browser:null,element:element,title:title,pages:pages,viewMore:viewMore,newTab:newTabRow,pageSections:new Map()};return section;function viewMoreClick()
{pages.classList.toggle("device-view-more-toggled");updateViewMoreTitle();}
function updateViewMoreTitle()
{viewMore.textContent=pages.classList.contains("device-view-more-toggled")?WebInspector.UIString("View less tabs\u2026"):WebInspector.UIString("View more tabs\u2026");}
function newTabKeyDown(event)