Skip to content

Commit 1594824

Browse files
aboseabose
committed
chore: html ui render at boot for fast boot performance 1
1 parent 970a655 commit 1594824

File tree

9 files changed

+188
-258
lines changed

9 files changed

+188
-258
lines changed

‎src/brackets.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -110,9 +110,6 @@ define(function (require, exports, module) {
110110
*/
111111
window.NotificationUI = NotificationUI;
112112

113-
114-
const MainViewHTML = require("text!htmlContent/main-view.html");
115-
116113
// load modules for later use
117114
require("utils/Global");
118115
require("editor/CSSInlineEditor");
@@ -445,9 +442,8 @@ define(function (require, exports, module) {
445442
};
446443
}());
447444

448-
449-
// Localize MainViewHTML and inject into <BODY> tag
450-
$body.append(Mustache.render(MainViewHTML, { shouldAddAA: (brackets.platform === "mac"), Strings: Strings }));
445+
$('#toolbar-extension-manager').prop('title', Strings.EXTENSION_MANAGER_TITLE);
446+
$('#update-notification').prop('title', Strings.UPDATE_NOTIFICATION_TOOLTIP);
451447

452448
// Update title
453449
$("title").text(brackets.config.app_title);

‎src/extensions/default/DarkTheme/main.less‎

Lines changed: 3 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@
3636
*/
3737

3838
/* Define some variables used in multiple places */
39+
// This is the default theme. Only add code mirror editor surface related styles here.
40+
// !!!! for styling any other UI related styles, please use brackets_theme_default.less !!!!!!!!!!!!!!!!!!!!!!!
41+
3942
@background: #1d1f21;
4043
@foreground: #ddd;
4144
@accent-property: #ddd;
@@ -49,24 +52,6 @@
4952

5053
/* Code Styling */
5154

52-
.CodeMirror-focused .CodeMirror-activeline-background {
53-
background: #2f2f2f;
54-
}
55-
56-
.show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
57-
box-shadow: inset 15px 0 0 0 #000;
58-
}
59-
60-
.CodeMirror-focused .CodeMirror-activeline {
61-
.CodeMirror-gutter-elt {
62-
background: rgba(0, 0, 0, 0.2);
63-
color: #fff;
64-
}
65-
.inline-widget .CodeMirror-gutter-elt {
66-
color: #767676;
67-
}
68-
}
69-
7055
.editor-text-fragment-matching-refs{
7156
background-color: @matching-bracket;
7257
}
@@ -101,27 +86,6 @@
10186
}
10287
}
10388

104-
105-
.CodeMirror-cursor {
106-
border-left: 1px solid #c5c8c6 !important;
107-
}
108-
109-
.CodeMirror-gutters {
110-
background-color: @background;
111-
border-right: none;
112-
}
113-
114-
.CodeMirror-linenumber {
115-
color: #767676;
116-
}
117-
118-
.CodeMirror .CodeMirror-selected {
119-
background: #333f48;
120-
}
121-
.CodeMirror-focused .CodeMirror-selected {
122-
background: #0050a0;
123-
}
124-
12589
.CodeMirror-matchingbracket, .CodeMirror-matchingtag {
12690
/* Ensure visibility against gray inline editor background */
12791
background-color: @matching-bracket;
@@ -133,51 +97,6 @@
13397
border-bottom: 1px solid #fff;
13498
}
13599

136-
/*
137-
CodeMirror's use of descendant selectors for certain styling causes problems when editors are
138-
nested because, for items in the inner editor, the left-hand clause in the selector will now
139-
match either the actual containing CodeMirror instance *OR* the outer "host" CodeMirror instance.
140-
141-
TODO (issue #324): We'll still have problems if editors can be nested more than one level deep,
142-
or if any other descendant-selector-driven CM styles can differ between inner & outer editors
143-
(potential problem areas include line wrap and coloring theme: basically, anything in codemirror.css
144-
that uses a descandant selector where the CSS class name to the left of the space is something
145-
other than a vanilla .CodeMirror)
146-
*/
147-
.CodeMirror {
148-
background-color: @background;
149-
color: @foreground;
150-
151-
.CodeMirror {
152-
background: transparent;
153-
}
154-
155-
.CodeMirror .CodeMirror-gutters {
156-
background: transparent;
157-
border-right: none;
158-
}
159-
160-
.CodeMirror .CodeMirror-activeline-background {
161-
background: transparent;
162-
}
163-
164-
.CodeMirror .CodeMirror-activeline .CodeMirror-gutter-elt {
165-
background: transparent;
166-
color: #767676;
167-
}
168-
169-
.CodeMirror-focused .CodeMirror-activeline-background {
170-
background: #2f2f2f;
171-
}
172-
173-
.CodeMirror-focused .CodeMirror-activeline {
174-
.CodeMirror-gutter-elt {
175-
background: rgba(0, 0, 0, 0.2);
176-
color: #fff;
177-
}
178-
}
179-
}
180-
181100
.CodeMirror-foldgutter-open:after {
182101
color: #666;
183102
}

‎src/extensions/default/LightTheme/main.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,4 @@
2020
// DEALINGS IN THE SOFTWARE.
2121

2222
// This is the default theme and doesn't need to do anything!
23+
/* Default theme empty. See brackets_theme_default.less to change theme css*/

‎src/extensions/default/NavigationAndHistory/NavigationProvider.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -655,16 +655,11 @@ define(function (require, exports, module) {
655655
function _setupNavigationButtons() {
656656
let $mainNavBarRight = $("#mainNavBarRight");
657657
let $mainNavBarLeft = $("#mainNavBarLeft");
658-
$mainNavBarRight.prepend("<div id=\"navBackButton\" class=\"nav-back-btn btn-alt-quiet\"></div>\n" +
659-
" <div id=\"navForwardButton\" class=\"nav-forward-btn btn-alt-quiet\"></div>\n" +
660-
" <div id=\"showInfileTree\" class=\"show-in-file-tree-btn btn-alt-quiet\"></div>"+
661-
" <div id=\"searchNav\" class=\"search-nav-btn btn-alt-quiet\"></div>");
662658
let $showInTree = $mainNavBarRight.find("#showInfileTree");
663659
$navback = $mainNavBarRight.find("#navBackButton");
664660
$navForward = $mainNavBarRight.find("#navForwardButton");
665661
$searchNav = $mainNavBarRight.find("#searchNav");
666662

667-
$mainNavBarLeft.prepend("<div id=\"newProject\" class=\"new-project-btn btn-alt-quiet\"></div>");
668663
$newProject = $mainNavBarLeft.find("#newProject");
669664

670665
$navback.attr("title", Strings.CMD_NAVIGATE_BACKWARD);

‎src/htmlContent/main-view.html‎

Lines changed: 0 additions & 128 deletions
This file was deleted.

‎src/index.html‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -410,6 +410,10 @@
410410
// this function is called onload so it is safe to be deferred loaded inline script as it is guarented to only
411411
// get executed after all deferred scripts has been loaded
412412
function _loadPhoenixAfterSplashScreen() {
413+
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
414+
// Dark mode is enabled
415+
document.body.classList.add('dark'); // This will later be overridden by the theme manager as required.
416+
}
413417
_removeSplashScreenIfNeeded();
414418
if(window.cacheRefreshInProgress){
415419
// We should not load anything while the cache is inconsistent.
@@ -502,6 +506,99 @@
502506
title="Phoenix Splash Screen" src="assets/phoenix-splash/index.html"></iframe>
503507
</div>
504508

509+
<div class="main-view">
510+
<div id="notificationUIDefaultAnchor" href="#">
511+
</div>
512+
<div id="sidebar" class="sidebar panel quiet-scrollbars horz-resizable right-resizer collapsible" data-minsize="0" data-maxsize="80%" data-forceleft=".content">
513+
<div id="mainNavBar">
514+
<div id="mainNavBarLeft">
515+
<div id="newProject" class="new-project-btn btn-alt-quiet"></div>
516+
</div>
517+
<div id="mainNavBarRight">
518+
<div id="navBackButton" class="nav-back-btn btn-alt-quiet"></div>
519+
<div id="navForwardButton" class="nav-forward-btn btn-alt-quiet"></div>
520+
<div id="showInfileTree" class="show-in-file-tree-btn btn-alt-quiet"></div>
521+
<div id="searchNav" class="search-nav-btn btn-alt-quiet"></div>
522+
<div class="working-set-splitview-btn btn-alt-quiet"></div>
523+
</div>
524+
</div>
525+
526+
<div id="working-set-list-container">
527+
528+
</div>
529+
<div id="project-files-header">
530+
<i id="project-operations-spinner" class="fa fa-spinner fa-spin forced-hidden"></i>
531+
<span id="project-title" class="title"></span>
532+
</div>
533+
<div id="project-files-container">
534+
<!-- This will contain a dynamically generated <ul> hierarchy at runtime -->
535+
</div>
536+
</div>
537+
538+
<!--
539+
Vertical stack of titlebar (in-browser), editor, bottom panels, status bar
540+
(status bar is injected later - see StatusBar.init()).
541+
Note: all children must be in a vertical stack with heights explicitly set in a fixed
542+
unit such as px (not percent/em/auto). If you change the height later, you must
543+
call WorkspaceManager.recomputeLayout() each time. Otherwise the layout will
544+
not get set correctly. Use WorkspaceManager to have this managed for you automatically.
545+
-->
546+
<div class="content">
547+
<!-- Horizontal titlebar containing menus & filename when inBrowser -->
548+
<div id="titlebar" class="toolbar no-focus">
549+
<!-- Menu bar -->
550+
<ul class="nav" data-dropdown="dropdown">
551+
</ul>
552+
553+
<!-- Filename label -->
554+
<div class="title-wrapper">
555+
<span class="title"></span>&nbsp;<span class='dirty-dot' style="visibility:hidden;">•</span>
556+
</div>
557+
</div>
558+
559+
<div id="editor-holder">
560+
<!-- View Panes are programatically created here -->
561+
</div>
562+
563+
<!-- Bottom panels and status bar are programmatically created here -->
564+
565+
</div>
566+
567+
<!-- Vertical toolbar docked to right -->
568+
<div id="main-toolbar" class="toolbar no-focus collapsible">
569+
<!-- Top-aligned buttons -->
570+
<div id="main-plugin-panel" class="plugin-panel">
571+
</div>
572+
<div id="plugin-icons-bar">
573+
<div class="buttons">
574+
<a id="toolbar-go-live" href="#"></a> <!-- tooltip for this is set in JS -->
575+
<a id="toolbar-extension-manager" href="#"></a>
576+
<a id="update-notification" href="#" style="display: none"></a>
577+
</div>
578+
<div class="bottom-buttons">
579+
</div>
580+
</div>
581+
</div>
582+
583+
<!-- Hack to ensure that the code editor's web font is loaded early. -->
584+
<!-- For more info, see note in brackets.less for class .dummy-text, or issue 76 -->
585+
<div class="dummy-text">x</div>
586+
</div>
587+
588+
<!-- Modal Windows -->
589+
<div id="context-menu-bar">
590+
<ul data-dropdown="dropdown"></ul>
591+
</div>
592+
<div id="codehint-menu-bar">
593+
<ul data-dropdown="dropdown"></ul>
594+
</div>
595+
<div id="inlinemenu-menu-bar">
596+
<ul data-dropdown="dropdown"></ul>
597+
</div>
598+
<div id="hidden-editors"></div>
599+
<!-- Notification bar -->
600+
<div id="toast-notification-container">
601+
</div>
505602
<!-- HTML content is dynamically loaded and rendered by brackets.js after _loadPhoenixAfterSplashScreen.
506603
Any modules that depend on or modify HTML during load should
507604
require the "utils/AppInit" module and install a callback for

0 commit comments

Comments
 (0)