vscode原始碼分析【九】窗口裡的主要元素
第一篇: vscode原始碼分析【一】從原始碼執行vscode
第二篇:vscode原始碼分析【二】程式的啟動邏輯,第一個視窗是如何建立的
第三篇:vscode原始碼分析【三】程式的啟動邏輯,效能問題的追蹤
第四篇:vscode原始碼分析【四】程式啟動的邏輯,最初建立的服務
第五篇:vscode原始碼分析【五】事件分發機制
第六篇:vscode原始碼分析【六】服務例項化和單例的實現
第七篇:vscode原始碼分析【七】主程序啟動訊息通訊服務
第八篇:vscode原始碼分析【八】載入第一個畫面
在上一節中,我們講到載入第一個畫面時,載入了一個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重新整理畫面;
相關推薦
vscode原始碼分析【九】窗口裡的主要元素
第一篇: vscode原始碼分析【一】從原始碼執行vscode 第二篇:vscode原始碼分析【二】程式的啟動邏輯,第一個視窗是如何建立的 第三篇:vscode原始碼分析【三】程式的啟動邏輯,效能問題的追蹤 第四篇:vscode原始碼分析【四】程式啟動的邏輯,最初建立的服務 第五篇:vsco
vscode原始碼分析【二】程式的啟動邏輯
上一篇文章:https://www.cnblogs.com/liulun/ (小廣告:我做的開源免費的,個人知識管理及自媒體營銷工具“想學嗎”:https://github.com/xland/xiangxuema) 我們在package.json裡能找到他的入口檔案; "m
vscode原始碼分析【三】程式的啟動邏輯,效能問題的追蹤
第一篇: vscode原始碼分析【一】從原始碼執行vscode 第二篇:vscode原始碼分析【二】程式的啟動邏輯,第一個視窗是如何建立的 啟動追蹤 程式碼檔案:src\main.js 如果指定了特定的啟動引數:trace vscode會在啟動之初,執行下面的程式碼: const con
vscode原始碼分析【五】事件分發機制
第一篇: vscode原始碼分析【一】從原始碼執行vscode 第二篇:vscode原始碼分析【二】程式的啟動邏輯,第一個視窗是如何建立的 第三篇:vscode原始碼分析【三】程式的啟動邏輯,效能問題的追蹤 第四篇:vscode原始碼分析【四】程式啟動的邏輯,最初建立的服務 在上一篇中,
vscode原始碼分析【七】主程序啟動訊息通訊服務
第一篇: vscode原始碼分析【一】從原始碼執行vscode 第二篇:vscode原始碼分析【二】程式的啟動邏輯,第一個視窗是如何建立的 第三篇:vscode原始碼分析【三】程式的啟動邏輯,效能問題的追蹤 第四篇:vscode原始碼分析【四】程式啟動的邏輯,最初建立的服務 第五篇:vsco
vscode原始碼分析【八】載入第一個畫面
第一篇: vscode原始碼分析【一】從原始碼執行vscode 第二篇:vscode原始碼分析【二】程式的啟動邏輯,第一個視窗是如何建立的 第三篇:vscode原始碼分析【三】程式的啟動邏輯,效能問題的追蹤 第四篇:vscode原始碼分析【四】程式啟動的邏輯,最初建立的服務 第五篇:vsco
caffe 原始碼分析【三】:Euclidean loss layer
以下是Euclidean loss layer的程式碼分析,轉自: https://blog.csdn.net/seashell_9/article/details/68064294 一. 前向函式 template <typename Dtype> void Euclide
caffe 原始碼分析【二】:Layer基類
建構函式 //標頭檔案 include/caffe/layer.hpp //實現檔案 src/caffe/layer.cpp // src/caffe/layer.cu /* * 建構函式 * 子類中修改建構函式,自定義設定在SetUp()中設定
caffe 原始碼分析【一】: Blob類
Blob類的: //標頭檔案: include\caffe\blob.hpp //cpp檔案: src\caffe\blob.cpp //cu檔案: src/caffe/blob.cu //定義某layer的輸入blobs const ve
JDK1.7原始碼分析【集合】HashMap的死迴圈
前言 在JDK1.7&1.8原始碼對比分析【集合】HashMap中我們遺留了一個問題:為什麼HashMap在呼叫resize() 方法時會出現死迴圈?這篇文章就通過JDK1.7的原始碼來分析並解釋這個問題。 如下,併發場景下使用HashMap造成Race Condition
imx6ul linux4.1.15 LED驅動配置及heartbeat原始碼分析【轉】
本文轉載自:https://blog.csdn.net/u010444107/article/details/78328807 1)檢視核心配置[email protected]:~/freescale/linux-imx$ cat arch/arm/configs/imx_v7_defconfi
Spring原始碼分析【4】-Spring掃描basePackages註解
org.springframework.beans.factory.support.DefaultListableBeanFactory 重要資料結構 /** Map of bean definition objects, keyed by bean name */ p
Spring原始碼分析【1】-Tomcat的初始化
org.apache.catalina.startup.ContextConfig.configureStart() org.apache.catalina.startup.ContextConfig.webConfig() 進入org.apache.catali
Spring原始碼分析【2】-Tomcat和Sping的連線點
Tomcat是怎麼呼叫上Spring的呢?需要找到這個連線點。 答案就在org.apache.catalina.startup.ContextConfig的processServletContainerInitializers方法 new WebappServiceLo
別翻了,這篇文章絕對讓你深刻理解java類的載入以及ClassLoader原始碼分析【JVM篇二】
目錄 1、什麼是類的載入(類初始化) 2、類的生命週期 3、介面的載入過程 4、解開開篇的面試題 5、理解首次主動使用 6、類載入器 7、關於名稱空間
Debug目錄、Release目錄,bin目錄、obj目錄,vshost.exe.config文件、.exe.config文件分析【C#】
修改 .com 重啟 不同 span http ocs 資料 更改 Debug目錄、Release目錄,bin目錄、obj目錄,vshost.exe.config文件、.exe.config文件分析【C#】 2013-10-06 孤風卓影 摘自 csdn博客 閱 5
【九】MongoDB管理之安全性
方法 開啟 oot backup 由於 alt 集群管理 失敗 exec 要保證一個安全的MongoDB運行環境,DBA需要實施一些控制保證用戶或應用程序僅僅訪問它們需要的數據。這些措施包括但不限於: 認證機制 基於角色的訪問控制 加密 審計 一、認證機制 認證是驗證客
嵌入式Linux截圖工具gsnap移植與分析【轉】
ram creat 嵌入式linux mbed 生活 rip 改變 因此 sig 轉自:http://blog.csdn.net/lu_embedded/article/details/53934184 版權聲明:開心源自分享,快樂源於生活 —&mdash
關於ftp響應碼的分析【轉載】
pro 授權 sys his opened closed 流量 有時 dom 轉載地址: http://www.jb51.net/article/26649.htm 1開頭-成功 2開頭-成功 3開頭-權限問題 4開頭-文件問題 5開頭-服務器問題 150 FILE
Mysql Binlog三種格式介紹及分析【轉】
delete -s 字符 ID color fine alt lte pan 一.Mysql Binlog格式介紹 Mysql binlog日誌有三種格式,分別為Statement,MiXED,以及ROW! 1.Statement:每一條會修改數據的sql