VsCode源碼分析之布局


關於VsCode源碼編譯運行,請參考這篇文章:VsCode源碼編譯運行

當然了,也可以參考官方文檔(所以這里就不再贅述):https://github.com/Microsoft/vscode/wiki/How-to-Contribute#build-and-run

今天主要分享的是關於VsCode源碼修改之布局。

如圖所示(圖畫的不是特別好看):

 

簡單做個說明(主要文件存在目錄(src\vs\workbench\browser\parts):

1是titlebar

目錄在src\vs\workbench\browser\parts\titlebar

 

2是activitybar

目錄在src\vs\workbench\browser\parts\activitybar

 

3是sidebar

目錄在src\vs\workbench\browser\parts\sidebar

 

4是statusbar

目錄在src\vs\workbench\browser\parts\statusbar

 

5是welcome

目錄在src\vs\workbench\parts\welcome

 

如果你要想修改對應的樣式,可以分別去對應的文件下修改,下面我分別來介紹這些文件的一些簡單的修改,不過在此之前有一點還是要強調的,那就是關於VsCode的源碼解析,這里不作深入講解,但是既然是要二次開發,源碼中各個文件作用是必須要知道的。

整體文件目錄結構如下所示:

build文件夾 #gulp編譯構建腳本

extensions  #內置插件

gulpfile.js    #gulp task

node_modules #node.js依賴模塊(相當於java中的maven依賴)

out   #編譯輸出目錄(typescript通常編譯會產生js文件,你可以翻看下out,發現這里邊基本都是js文件,當然了,也包含一些少量的json文件)

product.json #App meta信息

resources #平台相關靜態資源,圖標等

scripts #工具腳本,開發/測試

src #源碼目錄

test #測試套件

 

src下文件目錄結構,如下圖:

 

bootstrap-amd.js #子進程實際入口

bootstrap.js #子進程環境初始化

buildfile.js #構建config

cli.js #CLI入口

main.js #主進程入口

paths.js #AppDataPath與DefaultUserDataPath

typings #ts類型聲明

 

vs下文件目錄結構,如下圖所示:

bash #通用工具/協議和UI庫

     -browser #基礎UI組件,dom操作,交互事件,DnD等

     -common #diff描述,markdown解析器,worker協議,各種工具函數

     -node #Node工具函數

     -part #IPC協議(Electron、Node)、quickopen、tree組件

     -test #bash單測用例

     -worker #Worker factory 和main Worker(運行IDE Core:Monaco)

code #Vs Code主窗體相關

editor #對接IDE Core(讀取編輯/交互狀態),提供命令、上下文菜單、hover、snippet等支持

platform #支持注入服務和平台相關基礎服務(文件、剪切板、窗體、狀態欄)

workbench #協調editor並給viewlets提供框架,比如目錄查看器、狀態欄、活動欄等,全局搜索,集成Git,Debug

buildunit.json

css.build.js #用於插件構建css loader

css.js #css loader

loader.js #AMD loader(用於異步加載AMD模塊,類似於require.js)

nls.build.js #用於插件構建的NLS loader

nls.js #NLS(National Language Support)多語言支持

其中最關鍵的部分(業務相關的)是:

.src/vs/code:主窗體、工具類菜單創建

.src/vs/editor:代碼編輯器,IDE核心相關

.src/vs/workbench:UI布局,功能服務對接

P.S.IDE Core 可獨立使用,叫Monaco

每層按照目標執行環境細分組織:

common:可跨環境復用

browser:依賴瀏覽器API,比如DOM操作

node:依賴Node API

electron-browser:依賴electron renderer-process API

electron-main:依賴electron main-process API

 

上述目錄分別之作用參考鏈接為:http://ju.outofmemory.cn/entry/345080

 通過上述的講解,明白了每個目錄及其文件的作用,我們着手開始對布局的修改。

 

一、titlebar修改

找到titlebar.css文件,如圖:

 

 我們將display改為none即可隱藏titlebar

如果看titlebar左側的菜單欄(像file、edit等)這些不爽,想讓其消失,也是可以達到的,只不過就不是titlebar.css這個文件而是src\vs\base\browser\ui\menu\menu.css

將menu.css中的dislay改為none即可達到消失的目的,如圖所示:

 

 另外你如果覺得想在titlebar左側(file,edit等)這些再多加一個menu項,找到這個文件E:\VsCode\vscode-master\src\vs\workbench\browser\parts\titlebar\menubarControl.ts

並依樣畫葫蘆分別在這幾個地方增加(以增加Login為例):

圖一:

 

圖二:

 

 圖三:

 

這樣就可以達到在titlebar左側菜單欄多增加一個菜單選項。

但是像這樣的選項又是如何有的呢,如圖所示:

 

下面我告訴大家我是如何找到這個的。

首先我們看下面:

 

 這個MenuService其實相當我們Java中的業務Service可調用其對應的方法完成業務邏輯。

MenuService是如何有的呢?之所以有肯定是導入進來的,然后我回到頂部找到這個導入語句,如圖所示:

vs/platform/actions/common/actions這個actions通常要么是文件夾,要么就是某個ts文件。

然后我就去那個文件夾或文件下找,果然被我找到了,它就是一個action.ts文件,如圖所示:

 

 然后我就可以選擇下面枚舉定義點擊Login會出現什么樣的下拉菜單項。

這上面的剛好與這下面的對應,如圖所示:

 

 

二、Activitybar修改

目前Activitybar增加的菜單欄圖標我是通過插件的方式實現,還沒有找到如何直接增加一個菜單欄。

Activitybar如果要干掉的話,其實也很簡單,找到對應的css文件,即可干掉它。

例如,找到activitybar.css修改對應的樣式,如圖所示:

還是老規矩改樣式display改為none,但是由於其是絕對定位,即便干掉了,還會有所保留,這時我們找到一個叫layout.ts的文件(layou.ts主要用於布局計算),只需修改這段代碼即可解決這個問題。

修改layout.ts這段代碼即可,如圖所示:

 

 

如果我們要在圖標下面添加對應的文件怎么辦呢?

首先找到這個文件src\vs\workbench\browser\parts\activitybar\media\activityaction.css

將其修改為如下:

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item {
    display: block;
    position: relative;
    padding: 5px 0;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-label {
    display: flex;
    overflow: hidden;
    height: 70px;
    line-height: 70px;
    margin-right: 0;
    padding: 0 0 0 50px;
    box-sizing: border-box;
    font-size: 15px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item:focus:before {
    content: "";
    position: absolute;
    top: 9px;
    height: 32px;
    width: 0;
    border-left: 2px solid;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item0:after {
    content: "打開";
    position: absolute;
    top: 56px;
    height: 32px;
    text-align: center;
    width: 70px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item1:after {
    content: "編輯";
    position: absolute;
    top: 126px;
    height: 32px;
    text-align: center;
    width: 70px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item2:after {
    content: "調試";
    position: absolute;
    top: 196px;
    height: 32px;
    text-align: center;
    width: 70px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item3:after {
    content: "擴展";
    position: absolute;
    top: 266px;
    height: 32px;
    text-align: center;
    width: 70px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item4:after {
    content: "關閉";
    position: absolute;
    top: 336px;
    height: 32px;
    text-align: center;
    width: 70px;
}

/* .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item5:after {
    content: "設置";
    position: absolute;
    top: 106px;
    height: 32px;
    text-align: center;
    width: 70px;
} */

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item.clicked:focus:before {
    border-left: none !important; /* no focus feedback when using mouse */
}

.monaco-workbench > .activitybar.left > .content .monaco-action-bar .action-item:focus:before {
    left: 1px;
}

.monaco-workbench > .activitybar.right > .content .monaco-action-bar .action-item:focus:before {
    right: 1px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .badge {
    position: absolute;
    top: 5px;
    left: 0;
    overflow: hidden;
    width: 50px;
    height: 40px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .badge .badge-content {
    position: absolute;
    top: 20px;
    right: 8px;
    font-size: 11px;
    min-width: 8px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    border-radius: 20px;
    text-align: center;
}

/* Right aligned */

.monaco-workbench > .activitybar.right > .content .monaco-action-bar .action-label {
    margin-left: 0;
    padding: 0 50px 0 0;
    background-position: calc(100% - 9px) center;
}

.monaco-workbench > .activitybar.right > .content .monaco-action-bar .badge {
    left: auto;
    right: 0;
}

 

僅僅這樣做還是不夠,還是得需要找到ts文件

主要修改src\vs\base\browser\ui\actionbar\actionbar.ts這個ts文件

 

最終的結果是這樣的,如圖所示:

 

不過這樣看還是不爽,原來還有一個地方需要改那就是layout.ts

將這個值改為70,看起都居中就顯得比較完美了。

 

三、sidebar修改

主要修改的還是css文件,如圖所示:

 

隱藏就行,但是如果你想在里面添加什么東西,比如增加一個樹形功能之類的,這個可以去參考官網,官網的展示圖是這樣的,如下所示:

 

地址為:https://code.visualstudio.com/api/extension-guides/tree-view

官方雖然有一demo但是由於某種原因跑不起。

關於sidebar增加視圖,等后續研究成熟時,我會結合一些案例進行講解。

 

四、statusbar修改

還是老辦法,你如果覺得statusbar沒什么用完全可以隱藏它。修改css如下(加個display:none即可):

記得也要改對應的layout.ts文件,不然即便隱藏起來,但是還會占着底部位置,也沒多大用。

 

五、修改歡迎頁(welcome)

比如我想在歡迎頁增加一個表單html,如下所示:

 

效果如圖:

 

但是由於某種原因不支持內嵌ts加入script進行通信,所以我才選擇通過插件的方式進行通信。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM