vscode源码分析【九】窗口里的主要元素

第一篇: vscode源码分析【一】从源码运行vscode
第二篇:vscode源码分析【二】程序的启动逻辑,第一个窗口是如何创建的
第三篇:vscode源码分析【三】程序的启动逻辑,性能问题的追踪
第四篇:vscode源码分析【四】程序启动的逻辑,最初创建的服务
第五篇:vscode源码分析【五】事件分发机制
第六篇:vscode源码分析【六】服务实例化和单例的实现
第七篇:vscode源码分析【七】主进程启动消息通信服务
第八篇:vscode源码分析【八】加载第一个画面

在上一节中,我们讲到加载第一个画面时,加载了一个workbench.js
(src\vs\code\electron-browser\workbench\workbench.js)
这个文件中执行了:

bootstrapWindow.load([
	‘vs/workbench/workbench.main‘,
	‘vs/nls!vs/workbench/workbench.main‘,
	‘vs/css!vs/workbench/workbench.main‘
]

加载了workbench.main,这个文件负责初始化界面需要用到的库
它本身不负责执行任何逻辑,但却加载了三百多个类,哈!
bootstrapWindow.load的回调方法里,执行了:

require(‘vs/workbench/electron-browser/main‘).main(configuration);

这句代码很重要
我们看看这个类的main方法;它执行了:

	const renderer = new CodeRendererMain(configuration);
	return renderer.open();

CodeRendererMain类也在同一个文件里
(src\vs\workbench\electron-browser\main.ts)
它的构造函数里做了一些初始化工作(界面缩放事件设置、文件读写库的设置等)
不重要,先不理会,先看open方法:

this.workbench = new Workbench(document.body, services.serviceCollection, services.logService);
//......
const instantiationService = this.workbench.startup();

你看到,我们把body传给了workbench的实例
workbench的构造函数里,并没有用这个body做什么事情;
而是把他传递给了它的父类:Layout(src\vs\workbench\browser\layout.ts),存储在父类parent属性里
这个类很重要,我们待会儿会说;
现在我们看看workbench的startup方法

				// Layout
				this.initLayout(accessor);
				// Registries
				this.startRegistries(accessor);
				// Context Keys
this._register(instantiationService.createInstance(WorkbenchContextKeysHandler));
				// Register Listeners
				this.registerListeners(lifecycleService, storageService, configurationService);
				// Render Workbench
this.renderWorkbench(instantiationService, accessor.get(INotificationService) as NotificationService, storageService, configurationService);
				// Workbench Layout
this.createWorkbenchLayout(instantiationService);
				// Layout
				this.layout();

initLayout方法,初始化了一堆服务(environmentService,lifecycleService等),监听了一堆事件(全屏、编辑器显隐等)
renderWorkbench方法(最重要!),给body和一个叫container的元素加了一系列的样式;
container元素是在父类Layout里初始化的,这个元素最终会是所有组件的父亲;

	private _container: HTMLElement = document.createElement(‘div‘);
	get container(): HTMLElement { return this._container; }

之后,给container元素加了几个子元素:

[
			{ id: Parts.TITLEBAR_PART, role: ‘contentinfo‘, classes: [‘titlebar‘] },
			{ id: Parts.ACTIVITYBAR_PART, role: ‘navigation‘, classes: [‘activitybar‘, this.state.sideBar.position === Position.LEFT ? ‘left‘ : ‘right‘] },
			{ id: Parts.SIDEBAR_PART, role: ‘complementary‘, classes: [‘sidebar‘, this.state.sideBar.position === Position.LEFT ? ‘left‘ : ‘right‘] },
			{ id: Parts.EDITOR_PART, role: ‘main‘, classes: [‘editor‘], options: { restorePreviousState: this.state.editor.restoreEditors } },
			{ id: Parts.PANEL_PART, role: ‘complementary‘, classes: [‘panel‘, this.state.panel.position === Position.BOTTOM ? ‘bottom‘ : ‘right‘] },
			{ id: Parts.STATUSBAR_PART, role: ‘contentinfo‘, classes: [‘statusbar‘] }
		].forEach(({ id, role, classes, options }) => {
			const partContainer = this.createPart(id, role, classes);

			if (!configurationService.getValue(‘workbench.useExperimentalGridLayout‘)) {				this.container.insertBefore(partContainer, this.container.lastChild);
			}

			this.getPart(id).create(partContainer, options);
		});

这几个子元素分别是最左侧的ACTIVITYBAR_PART,中间的EDITOR_PART,等等(注意:窗口的菜单栏也是他自己渲染的)

这些元素创建出来之后,就加入到container里去了;
然后把container加入到body里去了(parent存的是body)

this.parent.appendChild(this.container);

在startup方法里还调用了this.layout()方法

				position(this.container, 0, 0, 0, 0, ‘relative‘);
				size(this.container, this._dimension.width, this._dimension.height);
				// Layout the grid widget
this.workbenchGrid.layout(this._dimension.width, this._dimension.height);
				// Layout grid views
				this.layoutGrid();

在这里把container放到到最大,占据整个body
至此界面主要元素渲染完成!

另外:
想调试界面里的内容,就不能用第一节讲的调试方法来调试了;
你可以运行:

.\scripts\code.bat

先启动画面,然后按Ctrl+Shift+i打开调试窗口;
如果需要刷新画面的话,可以按Ctrl+R刷新画面;

原文地址:https://www.cnblogs.com/liulun/p/11063794.html

时间: 2024-10-05 23:04:37

vscode源码分析【九】窗口里的主要元素的相关文章

vscode源码分析【八】加载第一个画面

第一篇: vscode源码分析[一]从源码运行vscode 第二篇:vscode源码分析[二]程序的启动逻辑,第一个窗口是如何创建的 第三篇:vscode源码分析[三]程序的启动逻辑,性能问题的追踪 第四篇:vscode源码分析[四]程序启动的逻辑,最初创建的服务 第五篇:vscode源码分析[五]事件分发机制 第六篇:vscode源码分析[六]服务实例化和单例的实现 第七篇:vscode源码分析[七]主进程启动消息通信服务 先复习一下! 在第一节中,我们提到: app.ts(src\vs\co

vscode源码分析【三】程序的启动逻辑,性能问题的追踪

第一篇: vscode源码分析[一]从源码运行vscode 第二篇:vscode源码分析[二]程序的启动逻辑,第一个窗口是如何创建的 启动追踪 代码文件:src\main.js 如果指定了特定的启动参数:trace vscode会在启动之初,执行下面的代码: const contentTracing = require('electron').contentTracing; const traceOptions = { categoryFilter: args['trace-category-f

jQuery源码分析(九) 异步队列模块 Deferred 详解

deferred对象就是jQuery的回调函数解决方案,它解决了如何处理耗时操作的问题,比如一些Ajax操作,动画操作等.(P.s:紧跟上一节:https://www.cnblogs.com/greatdesert/p/11433365.html的内容) 异步队列有三种状态:待定(pending).成功(resolved)和失败(rejected),初始时处于pending状态 我们可以使用jQuery.Deferred创建一个异步队列,返回一个对象,该对象含有如下操作: done(fn/arr

vscode源码分析【一】环境搭建+以源码运行vscode

安装git,nodejs和yarn 安装Python27,3.x版本的不行,确保它在你的环境变量里: 安装gulp npm install --global gulp-cli 安装windows build tools: npm install --global windows-build-tools --vs2015 安装node-gyp npm install -g node-gyp 下载vscode的源码: 用管理员的方式打开powershell,不是管理员身份不行 在源码根目录下执行:y

vscode源码分析【二】程序的启动逻辑

上一篇文章:https://www.cnblogs.com/liulun/ (小广告:我做的开源免费的,个人知识管理及自媒体营销工具“想学吗”:https://github.com/xland/xiangxuema) 我们在package.json里能找到他的入口文件: "main": "./out/main", electron是分主进程和渲染进程的: 渲染进程是主进程启动的: ./out/main.js显然这就是主进程的入口程序: 确实不假 但别着急去分析这个文

[Abp 源码分析]九、事件总线

0.简介 事件总线就是订阅/发布模式的一种实现,本质上事件总线的存在是为了降低耦合而存在的. 从上图可以看到事件由发布者发布到事件总线处理器当中,然后经由事件总线处理器调用订阅者的处理方法,而发布者和订阅者之间并没有耦合关系. 像 Windows 本身的设计也是基于事件驱动,当用户点击了某个按钮,那么就会触发相应的按钮点击事件,而程序只需要监听这个按钮点击事件即可进行相应的处理,而事件被触发的时候往往都会附带相应的事件源,事件所产生的数据等. 还是以按钮被点击为例,该事件被触发的时候会装填上触发

wxWidgets源码分析(7) - 窗口尺寸

目录 窗口尺寸 概述 窗口Size消息的处理 用户调整Size消息的处理 调整窗口大小 程序调整窗口大小 wxScrolledWindow设置窗口大小 获取TextCtrl控件最合适大小 窗口尺寸 概述 类型 说明 Size 当前窗口实际大小,通过wxWindow::SetSize()获取: Client Size 客户区大小: Best Size 最合适的大小,用户可以实现wxWindow::DoGetBestSize()方法,自定义返回最合适的大小: Best Client Size 最合适

wxWidgets源码分析(6) - 窗口关闭过程

目录 窗口关闭过程 调用流程 关闭文档 删除视图 删除文档对象 关闭Frame App清理 多文档窗口的关闭 窗口的正式删除 窗口关闭过程总结 如何手工删除view 窗口关闭过程 调用流程 用户点击窗口的关闭按钮后,Win32系统会向当前的Frame对象发送WM_CLOSE消息,此时会进入到Frame的wxFrame::MSWWindowProc函数进行处理: WXLRESULT wxFrame::MSWWindowProc(WXUINT message, WXWPARAM wParam, WX

vscode源码分析【七】主进程启动消息通信服务

在mian.ts中的doStartup方法里,创建了一个命名管道服务 (src\vs\code\electron-main\main.ts) server = await serve(environmentService.mainIPCHandle); once(lifecycleService.onWillShutdown)(() => server.dispose()); 传入的environmentService.mainIPCHandle是命名管道的识别路径, 一个有规则的字符串,规则如