Skip to content

Commit

Permalink
chore: html ui render at boot for fast boot performance 1
Browse files Browse the repository at this point in the history
  • Loading branch information
@abose
abose committed Dec 3, 2023
1 parent 970a655 commit f4e38d1
Show file tree
Hide file tree
Showing 9 changed files with 188 additions and 258 deletions.
8 changes: 2 additions & 6 deletions src/brackets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,6 @@ define(function (require, exports, module) {
*/
window.NotificationUI = NotificationUI;


const MainViewHTML = require("text!htmlContent/main-view.html");

// load modules for later use
require("utils/Global");
require("editor/CSSInlineEditor");
Expand Down Expand Up @@ -445,9 +442,8 @@ define(function (require, exports, module) {
};
}());


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

// Update title
$("title").text(brackets.config.app_title);
Expand Down
87 changes: 3 additions & 84 deletions src/extensions/default/DarkTheme/main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@
*/

/* Define some variables used in multiple places */
// This is the default theme. Only add code mirror editor surface related styles here.
// !!!! for styling any other UI related styles, please use brackets_theme_default.less !!!!!!!!!!!!!!!!!!!!!!!

@background: #1d1f21;
@foreground: #ddd;
@accent-property: #ddd;
Expand All @@ -49,24 +52,6 @@

/* Code Styling */

.CodeMirror-focused .CodeMirror-activeline-background {
background: #2f2f2f;
}

.show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
box-shadow: inset 15px 0 0 0 #000;
}

.CodeMirror-focused .CodeMirror-activeline {
.CodeMirror-gutter-elt {
background: rgba(0, 0, 0, 0.2);
color: #fff;
}
.inline-widget .CodeMirror-gutter-elt {
color: #767676;
}
}

.editor-text-fragment-matching-refs{
background-color: @matching-bracket;
}
Expand Down Expand Up @@ -101,27 +86,6 @@
}
}


.CodeMirror-cursor {
border-left: 1px solid #c5c8c6 !important;
}

.CodeMirror-gutters {
background-color: @background;
border-right: none;
}

.CodeMirror-linenumber {
color: #767676;
}

.CodeMirror .CodeMirror-selected {
background: #333f48;
}
.CodeMirror-focused .CodeMirror-selected {
background: #0050a0;
}

.CodeMirror-matchingbracket, .CodeMirror-matchingtag {
/* Ensure visibility against gray inline editor background */
background-color: @matching-bracket;
Expand All @@ -133,51 +97,6 @@
border-bottom: 1px solid #fff;
}

/*
CodeMirror's use of descendant selectors for certain styling causes problems when editors are
nested because, for items in the inner editor, the left-hand clause in the selector will now
match either the actual containing CodeMirror instance *OR* the outer "host" CodeMirror instance.
TODO (issue #324): We'll still have problems if editors can be nested more than one level deep,
or if any other descendant-selector-driven CM styles can differ between inner & outer editors
(potential problem areas include line wrap and coloring theme: basically, anything in codemirror.css
that uses a descandant selector where the CSS class name to the left of the space is something
other than a vanilla .CodeMirror)
*/
.CodeMirror {
background-color: @background;
color: @foreground;

.CodeMirror {
background: transparent;
}

.CodeMirror .CodeMirror-gutters {
background: transparent;
border-right: none;
}

.CodeMirror .CodeMirror-activeline-background {
background: transparent;
}

.CodeMirror .CodeMirror-activeline .CodeMirror-gutter-elt {
background: transparent;
color: #767676;
}

.CodeMirror-focused .CodeMirror-activeline-background {
background: #2f2f2f;
}

.CodeMirror-focused .CodeMirror-activeline {
.CodeMirror-gutter-elt {
background: rgba(0, 0, 0, 0.2);
color: #fff;
}
}
}

.CodeMirror-foldgutter-open:after {
color: #666;
}
Expand Down
1 change: 1 addition & 0 deletions src/extensions/default/LightTheme/main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,4 @@
// DEALINGS IN THE SOFTWARE.

// This is the default theme and doesn't need to do anything!
/* Default theme empty. See brackets_theme_default.less to change theme css*/
5 changes: 0 additions & 5 deletions src/extensions/default/NavigationAndHistory/NavigationProvider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -655,16 +655,11 @@ define(function (require, exports, module) {
function _setupNavigationButtons() {
let $mainNavBarRight = $("#mainNavBarRight");
let $mainNavBarLeft = $("#mainNavBarLeft");
$mainNavBarRight.prepend("<div id=\"navBackButton\" class=\"nav-back-btn btn-alt-quiet\"></div>\n" +
" <div id=\"navForwardButton\" class=\"nav-forward-btn btn-alt-quiet\"></div>\n" +
" <div id=\"showInfileTree\" class=\"show-in-file-tree-btn btn-alt-quiet\"></div>"+
" <div id=\"searchNav\" class=\"search-nav-btn btn-alt-quiet\"></div>");
let $showInTree = $mainNavBarRight.find("#showInfileTree");
$navback = $mainNavBarRight.find("#navBackButton");
$navForward = $mainNavBarRight.find("#navForwardButton");
$searchNav = $mainNavBarRight.find("#searchNav");

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

$navback.attr("title", Strings.CMD_NAVIGATE_BACKWARD);
Expand Down
128 changes: 0 additions & 128 deletions src/htmlContent/main-view.html
View file

This file was deleted.

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

<div class="main-view">
<div id="notificationUIDefaultAnchor" href="#">
</div>
<div id="sidebar" class="sidebar panel quiet-scrollbars horz-resizable right-resizer collapsible" data-minsize="0" data-maxsize="80%" data-forceleft=".content">
<div id="mainNavBar">
<div id="mainNavBarLeft">
<div id="newProject" class="new-project-btn btn-alt-quiet"></div>
</div>
<div id="mainNavBarRight">
<div id="navBackButton" class="nav-back-btn btn-alt-quiet"></div>
<div id="navForwardButton" class="nav-forward-btn btn-alt-quiet"></div>
<div id="showInfileTree" class="show-in-file-tree-btn btn-alt-quiet"></div>
<div id="searchNav" class="search-nav-btn btn-alt-quiet"></div>
<div class="working-set-splitview-btn btn-alt-quiet"></div>
</div>
</div>

<div id="working-set-list-container">

</div>
<div id="project-files-header">
<i id="project-operations-spinner" class="fa fa-spinner fa-spin forced-hidden"></i>
<span id="project-title" class="title"></span>
</div>
<div id="project-files-container">
<!-- This will contain a dynamically generated <ul> hierarchy at runtime -->
</div>
</div>

<!--
Vertical stack of titlebar (in-browser), editor, bottom panels, status bar
(status bar is injected later - see StatusBar.init()).
Note: all children must be in a vertical stack with heights explicitly set in a fixed
unit such as px (not percent/em/auto). If you change the height later, you must
call WorkspaceManager.recomputeLayout() each time. Otherwise the layout will
not get set correctly. Use WorkspaceManager to have this managed for you automatically.
-->
<div class="content">
<!-- Horizontal titlebar containing menus & filename when inBrowser -->
<div id="titlebar" class="toolbar no-focus">
<!-- Menu bar -->
<ul class="nav" data-dropdown="dropdown">
</ul>

<!-- Filename label -->
<div class="title-wrapper">
<span class="title"></span>&nbsp;<span class='dirty-dot' style="visibility:hidden;">•</span>
</div>
</div>

<div id="editor-holder">
<!-- View Panes are programatically created here -->
</div>

<!-- Bottom panels and status bar are programmatically created here -->

</div>

<!-- Vertical toolbar docked to right -->
<div id="main-toolbar" class="toolbar no-focus collapsible">
<!-- Top-aligned buttons -->
<div id="main-plugin-panel" class="plugin-panel">
</div>
<div id="plugin-icons-bar">
<div class="buttons">
<a id="toolbar-go-live" href="#"></a> <!-- tooltip for this is set in JS -->
<a id="toolbar-extension-manager" href="#"></a>
<a id="update-notification" href="#" style="display: none"></a>
</div>
<div class="bottom-buttons">
</div>
</div>
</div>

<!-- Hack to ensure that the code editor's web font is loaded early. -->
<!-- For more info, see note in brackets.less for class .dummy-text, or issue 76 -->
<div class="dummy-text">x</div>
</div>

<!-- Modal Windows -->
<div id="context-menu-bar">
<ul data-dropdown="dropdown"></ul>
</div>
<div id="codehint-menu-bar">
<ul data-dropdown="dropdown"></ul>
</div>
<div id="inlinemenu-menu-bar">
<ul data-dropdown="dropdown"></ul>
</div>
<div id="hidden-editors"></div>
<!-- Notification bar -->
<div id="toast-notification-container">
</div>
<!-- HTML content is dynamically loaded and rendered by brackets.js after _loadPhoenixAfterSplashScreen.
Any modules that depend on or modify HTML during load should
require the "utils/AppInit" module and install a callback for
Expand Down
Loading

0 comments on commit f4e38d1

Please sign in to comment.